Web Audio API: Browser Support, Features, Known Issues

What is Web Audio API?

Web Audio API is a W3C standard for routing, processing, and synthesizing audio inside a node graph in the browser. The W3C Audio Working Group maintains the spec. The entry point is AudioContext, which wires source nodes (oscillators, audio files, microphone streams) through processing nodes (gain, filter, panner, analyser) to a destination node that plays through the speakers.

Which browsers does Web Audio API support?

Web Audio API works in every modern browser. Chrome, Edge, Firefox, Safari, Opera, and Samsung Internet all ship support; only Internet Explorer never added it.

What are the key features of Web Audio API?

Web Audio API ships a modular toolkit for routing, generating, and analyzing sound in JavaScript. Below are the building blocks every project relies on.

• AudioContext: The entry point. It owns the audio graph, the sample rate, and the output destination, and exposes the master clock that every node schedules against.
• Source nodes: Include OscillatorNode for synthesized waveforms, AudioBufferSourceNode for in-memory clips, and MediaStreamAudioSourceNode for microphone or WebRTC input.
• Processing nodes: GainNode for volume, BiquadFilterNode for equalization, DynamicsCompressorNode for compression, ConvolverNode for reverb, and PannerNode for 3D spatialization.
• AnalyserNode: Returns frequency-domain and time-domain data through getByteFrequencyData() and getByteTimeDomainData(), used to power waveform and spectrum visualizations.
• AudioWorklet: Lets you write custom DSP on a separate audio rendering thread, replacing the deprecated ScriptProcessorNode. It shipped in Chrome 66, Firefox 76, and Safari 14.1.
• Sample-accurate scheduling: Every start(time) and AudioParam.setValueAtTime(value, time) call lines up with the AudioContext clock at sub-millisecond precision.

How does Web Audio API work?

Web Audio API runs every sound through an audio graph: source nodes connect to processing nodes, which connect to a destination node that the browser plays. The pipeline runs in four steps.

• Create an AudioContext: Run const ctx = new AudioContext(). The context owns the sample rate (typically 48000 Hz) and the audio clock.
• Create source nodes: Feed the context audio from an HTMLAudioElement, an AudioBuffer, an OscillatorNode, or a microphone stream returned by getUserMedia().
• Connect processing nodes: Chain source.connect(gain).connect(filter).connect(panner). Each call adds a node to the graph and routes audio through it.
• Connect to the destination: Call panner.connect(ctx.destination). The browser then mixes the graph in a real-time audio thread and writes samples to the output device.

Modern browsers start the AudioContext in a suspended state until the user interacts with the page. Call ctx.resume() inside a click or keydown handler to start playback.

What are the use cases of Web Audio API?

Web Audio API powers production audio across browser-based games, music tools, video conferencing, and streaming services.

• Games and interactive media: Unity WebGL, Phaser, and Babylon.js use Web Audio for spatialized sound effects, music ducking, and dynamic mixing.
• Browser DAWs: Soundtrap, BandLab, and Splice load samples through AudioBufferSourceNode and chain BiquadFilterNode plus DynamicsCompressorNode for in-browser mixing.
• Voice and video conferencing: Google Meet and Discord process microphone audio through MediaStreamAudioSourceNode for noise gating and gain control.
• Streaming and podcasting: Spotify Web Player and SoundCloud use Web Audio for crossfading, gain normalization, and EQ presets.
• Audio visualization: AnalyserNode powers oscilloscopes, frequency bars, and waveform displays in players like Vimeo and Twitch.

What are the known issues with Web Audio API?

Web Audio API is widely supported, but cross-browser parity is not perfect. In my experience, autoplay enforcement and the legacy webkitAudioContext prefix cause the most QA regressions.

• Autoplay restrictions: Chrome 66 and later, Safari 11 and later, and Firefox 66 and later start every AudioContext in a suspended state until a user gesture. Tests must trigger a click before calling ctx.resume() or audio stays silent with no error.
• webkitAudioContext prefix: Safari 6 to 14 and Chrome 14 to 33 required new webkitAudioContext(). Sites that target older Safari builds still need the fallback window.AudioContext = window.AudioContext || window.webkitAudioContext.
• Old method names: Legacy WebKit shipped noteOn, noteOff, and createGainNode. Chrome and Firefox migrated to start, stop, and createGain. A polyfill is required if you must run on Safari 6 to 8.
• iOS sample-rate quirk: iOS Safari historically locks the AudioContext to 44100 Hz even when the device output runs at 48000 Hz, causing pitch and timing drift in offline rendering.
• AudioWorklet availability: AudioWorklet shipped in Chrome 66, Firefox 76, and Safari 14.1. Apps that must run on Safari 13 or earlier still depend on the deprecated ScriptProcessorNode.
• IE has no fallback: Internet Explorer 11 does not implement any part of the API. Sites that must support IE 11 fall back to the HTML audio element or shift audio handling to a server-side pipeline.

Citations

All Web Audio API version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs - Web Audio API: developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
• MDN Web Docs - AudioContext: developer.mozilla.org/en-US/docs/Web/API/AudioContext
• MDN Web Docs - Cross-browser Web Audio API guide: developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Web_Audio_API_cross_browser
• MDN Web Docs - Autoplay guide for media and Web Audio APIs: developer.mozilla.org/en-US/docs/Web/Media/Guides/Autoplay
• W3C - Web Audio API 1.1 specification: w3.org/TR/webaudio-1.1
• W3C - Web Audio API press release: w3.org/press-releases/2021/webaudio
• Wikipedia - Web Audio API: en.wikipedia.org/wiki/Web_Audio_API
• Web Audio Working Group - Implementation Report: webaudio.github.io/web-audio-api/implementation-report
• WebKit blog - New WebKit Features in Safari 14.1: webkit.org/blog/11648/new-webkit-features-in-safari-14-1
• Chrome for Developers - Autoplay policy: developer.chrome.com/blog/autoplay
• Mozilla Hacks - Firefox 76 release announcement: hacks.mozilla.org/2020/05/firefox-76
• Apple Developer - Safari Technology Preview release notes: developer.apple.com/documentation/safari-release-notes