Three paths that should stay understandable

A browser studio contains three related but distinct paths. Audio carries the sound. MIDI carries performance instructions. The interface tells the player what is connected and what will happen next. Confusing them produces familiar problems: a MIDI indicator moves but nothing sounds, a microphone is enabled but not monitored, or a record light gives no clue which signals are being captured. A playable design makes each path visible in plain language.

Web MIDI connects a page to MIDI ports exposed by the system. It does not carry audio, and it does not automatically make a receiver MPE-aware. MDN also documents secure-context and browser-support constraints. Before building a workflow around a browser, test the actual combination of browser, operating system and interface. A supported API is a starting condition, not evidence that every controller feature or audio route has been verified.

Make the first sound deliberate

Begin a session by selecting the output route, lowering the listening level and explicitly starting audio. Play a short note on the page before connecting external equipment. Next, select the MIDI input and confirm that a held note ends when released. Then test expressive messages separately. This order keeps basic sound generation, device connection and expression mapping from becoming one difficult troubleshooting problem.

Custom audio processing can use AudioWorklet, which MDN describes as running on the Web Audio processing thread. That is an appropriate foundation for DSP whose timing should not depend on drawing the interface. It does not promise a particular end-to-end latency: the device, driver, browser and routing still contribute. Judge responsiveness with the actual playing gesture, and avoid measuring a beautifully animated meter as if it were evidence about the sound.

Give the microphone its own decisions

Microphone access is a permissioned input stream. Selecting a microphone, hearing it through effects and recording it are separate actions, and the interface should keep them separate. Start with headphones and monitoring muted. Select the intended input, inspect its level, then bring monitoring in deliberately. If the hardware interface also provides direct monitoring, decide whether you want that dry path in addition to the browser’s processed path.

Make a short voice recording before a long session. Listen for clipping, unexpected processing and doubled monitoring. Say the source and intended route aloud at the beginning of the test; that makes the file useful later. A vocal channel should let you keep a clear signal while feeding a controlled amount into delays or other processing. More effect depth is not a remedy for an input that is already distorted.

Record a result, not an assumption

Test what the record button actually includes. Play the synth, speak into the selected input, change an effect and leave a short tail. Stop, download and play the file outside the page. This is the shortest useful proof that the export contains the session you heard. A browser recording format may differ between implementations, so trust the actual file type and playback result rather than a filename chosen for appearance.

When developing your own instrument, make failure states part of the design: a disconnected MIDI device, a denied microphone request, an audio context that needs restarting. Keep controls available to silence the result and recover. For the player, save settings separately from audio when the instrument supports it. The recording preserves what happened; the settings preserve a way to begin again. Both matter when a browser page becomes part of a serious musical practice.

Take it into a session

Try this.

Make a thirty-second routing test containing a page-played note, a MIDI-played note, a spoken phrase and an effect tail. Download it and listen outside the browser. Note exactly what was recorded and which input, output and monitoring paths were used.

Listen back

  • Does the connection display distinguish MIDI from audio?
  • Can you enable the microphone without immediately monitoring it?
  • Does the downloaded recording contain the complete intended mix?
Open the studio →