Web Audio API: A Modular Synth for Your Browser
The Web Audio API treats sound as a modular graph. You connect sources (files, oscillators) to effects (filters) and a destination (speakers) for precise, low-latency control. It's ideal for games and music apps.
Why it exists
The standard HTML <audio> element is fine for simple playback, but it lacks the precision and flexibility needed for complex tasks like gaming sound effects, synthesizers, or real-time visualizations. The Web Audio API was created to provide a low-latency, high-precision system for processing and synthesizing audio directly in the browser.
The mental model
Think of the Web Audio API as a virtual, modular audio rack, like a guitarist's pedalboard. You have an AudioContext which is your main workspace. Inside it, you create various "nodes" and connect them in a chain or graph. Sound flows from a source node, through one or more processing nodes, and finally to a destination node that outputs to the speakers.
How it works
All operations happen within an AudioContext. First, you create source nodes, which generate sound. These can be an OscillatorNode for pure tones, an AudioBufferSourceNode to play a decoded audio file, or a MediaStreamAudioSourceNode for live input like a microphone. Second, you create intermediate nodes for effects, like a GainNode to control volume or a BiquadFilterNode to cut or boost frequencies. Third, you connect these nodes together using their connect() method, forming an audio routing graph. Finally, you must connect the last node in your chain to the context's destination property, which represents the computer's speakers. Without this final connection, no sound will be heard.
When to use it
Use the Web Audio API for applications requiring granular control over audio. This includes browser-based games needing responsive sound effects, digital audio workstations (DAWs), virtual synthesizers, and audio visualizations that react to frequency data. Its low-latency design is crucial for interactive experiences.
When not to use it
For simple, linear playback of a single audio file without any effects or precise timing, the standard <audio> element is simpler and sufficient. The Web Audio API adds unnecessary complexity if all you need is a basic play/pause button.
One canonical example
To create a simple synth tone, you create an AudioContext. Inside it, create an OscillatorNode to generate a waveform and a GainNode to control volume. You connect the oscillator to the gain node (oscillator.connect(gainNode)), and then connect the gain node to the context's destination (gainNode.connect(audioContext.destination)). Calling oscillator.start() begins playback through the graph to the speakers.
Interview question
Which statement best describes the fundamental operational model of the Web Audio API?
- a.It processes sound by connecting various audio nodes in a modular graph within an AudioContext.Correct
- b.It streams audio data directly from a server to the speaker output.
- c.It uses a declarative HTML tag to embed and control audio playback.
- d.It provides high-level functions for playing, pausing, and seeking audio files.
Why? this is the answer
The Web Audio API operates like a modular audio rack, where sound flows through a graph of interconnected nodes within an AudioContext. Option C describes the HTML audio element, which is a simpler alternative for basic playback, not the Web Audio API's model.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #web apis
- #audio
- #browser
- #javascript
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on web apis — each one lists the topics its interview covers.
See open roles