Designing browser music controls around the next beat
When I am playing guitar alone, changing a backing groove usually means moving a hand from the instrument to the laptop. A button can be easy to click and still interrupt the activity it is supposed to support. That problem led me to Mock Band, a browser rhythm section, and to a useful distinction: accepting a command, applying a musical change and making that change understandable to the player…
The article discusses the challenges of designing intuitive browser music controls that allow musicians to easily modify backing grooves without interrupting their hands-on performance. To address this, the author created a browser-based rhythm section called Mock Band, which enables users to choose drums, bass, and guitar accompaniment, repeat grooves, and reshape them through commands.
The design process involved separating the tasks of accepting commands, applying musical changes, and making those changes understandable to the player. The author also explored the use of voice recognition and MIDI support across various browser and device combinations, highlighting the importance of visible controls and text-based operations when certain input methods are unavailable.
The implementation of the system relies on React and TypeScript, with shared application state and provider handlers connecting different input methods to the same musical actions, allowing for a seamless and intuitive user experience.
Brief written by urgent.news from Dev.to's own syndicated text. Machine-written — may contain errors; check the original before relying on it.
