How we made a MIDI controller run our browser radio studio
A live radio screen is fine until the host has to do three things at once. The mouse becomes the wrong tool the moment you need to open a mic, pull music down, and hit a jingle without looking away. That is when we decided our browser studio had to understand cheap MIDI controllers. What I wanted from the hardware The Broadcast Studio at Tunio already ran in the browser. It had a mixer, pad grid,…
The Broadcast Studio at Tunio ran entirely in the browser, featuring a mixer, pad grid, mic channels, guest links, a master section, recording capabilities, and a simple "Go Live" button. This setup worked seamlessly with a mouse. However, during live radio broadcasts, the host required a more tactile experience, with physical controls such as faders, pads, and buttons that provided immediate feedback.
To address this, the team decided to integrate MIDI controllers into the browser-based studio without requiring users to install additional software or purchase extra hardware components.
Web MIDI, a browser feature available in Chrome and Edge, enabled the system to detect connected USB-MIDI devices. Once a MIDI controller was plugged in, the browser could receive notes, knobs, faders, and button presses directly from the hardware. The challenge lay in determining what each MIDI message should represent. Different controllers translated human actions into MIDI signals in various ways.
Some pads sent MIDI notes, while others sent control changes. Faders and buttons could transmit streams of data. To simplify the process for users, the team implemented a "MIDI Learn" feature that allowed them to assign studio functions to hardware controls intuitively. Users could select an action in the studio (e.g., a jingle pad, channel level, "Go Live," mute, or "CUE") and then touch the corresponding physical control on their MIDI device.
The studio would then observe the incoming MIDI data and automatically create a binding based on whether the control sent a single value on press or a range of values during a sweep. This approach eliminated the need for users to configure MIDI settings explicitly.
Matching the hardware layout proved to be another hurdle. MIDI controllers are not standardized, with many variations in the number and arrangement of pads, faders, and knobs. To accommodate these differences, the studio settings allowed users to customize the number of pads and their layout on the screen. For example, if a controller had a 4×4 pad grid, the on-screen pad grid could also be set to 4×4.
This customization ensured that pressing a hardware pad would trigger the appropriate on-screen action, providing a familiar and intuitive experience for the host. Mixer channels introduced additional complexity. Since guest channel assignments could change dynamically, the team decided to bind these channels to specific hardware slots rather than individual human users.
This way, if a guest left and another joined, the binding would remain consistent, ensuring a smooth transition without requiring the host to reconfigure controls.
In addition to receiving MIDI input, the studio also had to communicate with the hardware. Real-time feedback from the controller enhanced the user experience, making the system feel more like a traditional mixing console. The studio sent MIDI messages back to the controller to indicate state changes, such as when a channel went live or was muted.
This feature made the on-screen controls more responsive and visually informative, mirroring the feedback provided by traditional hardware consoles. However, the system faced limitations, particularly with Safari, which lacked support for Web MIDI. Additionally, the variability in MIDI controllers required careful handling of device-specific quirks.
To address these challenges, the team opted for a "plug and play" approach, which minimized the learning curve for users. They acknowledged the inherent imperfections and quirks of MIDI, which were largely unavoidable given the technology's age and varied implementations across different devices.
The most satisfying aspect of the project was that the browser-based studio could now match the functionality of a physical mixing console, offering hosts a seamless and professional live broadcast experience. The integration of MIDI controllers in the web-based platform enabled real-time control of various studio functions, enhancing the overall broadcast quality.
Despite the complexities and limitations, the result was a robust and user-friendly broadcast studio that operated entirely within the browser, giving hosts the tools they needed to conduct live radio shows effortlessly.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
