The Web Audio API provides a powerful and versatile system for controlling audio on the Web, allowing developers to choose audio sources, add effects to audio, create audio visualizations, apply spatial effects (such as panning) and much more. Web audio concepts and usage The Web Audio API involves handling audio operations inside an , and has been designed to allow . Basic audio operations are performed with , which are linked together to form an . Several sources — with different types of channel layout — are supported even within a single context. This modular design provides the flexibility to create complex audio functions with dynamic effects. audio context modular routing audio nodes audio routing graph Audio nodes are linked into chains and simple webs by their inputs and outputs. They typically start with one or more sources. Sources provide arrays of sound intensities (samples) at very small timeslices, often tens of thousands of them per second. These could be either computed mathematically (such as ), or they can be recordings from sound/video files (like and ) and audio streams ( ). OscillatorNode AudioBufferSourceNode MediaElementAudioSourceNode MediaStreamAudioSourceNode In fact, sound files are just recordings of sound intensities themselves, which come in from microphones or electric instruments, and get mixed down into a single, complicated wave. Outputs of these nodes could be linked to inputs of others, which mix or modify these streams of sound samples into different streams. A common modification is multiplying the samples by a value to make them louder or quieter (as is the case with ). GainNode Once the sound has been sufficiently processed for the intended effect, it can be linked to the input of a destination ( ), which sends the sound to the speakers or headphones. This last connection is only necessary if the user is supposed to hear the audio. AudioContext.destination A simple, typical workflow for web audio would look something like this: Create audio context Inside the context, create sources — such as , oscillator, stream <audio> Create effects nodes, such as reverb, biquad filter, panner, compressor Choose final destination of audio, for example your system speakers Connect the sources up to the effects, and the effects to the destination. Timing is controlled with high precision and low latency, allowing developers to write code that responds accurately to events and is able to target specific samples, even at a high sample rate. So applications such as drum machines and sequencers are well within reach. The Web Audio API also allows us to control how audio is . Using a system based on a , it allows control of the and deals with or induced by a moving source (or moving listener). spatialized source-listener model panning model distance-induced attenuation doppler shift You can read about the theory of the Web Audio API in a lot more detail in our article . Basic concepts behind Web Audio API Web Audio API target audience The Web Audio API can seem intimidating to those that aren't familiar with audio or music terms, and as it incorporates a great deal of functionality it can prove difficult to get started if you are a developer. It can be used to simply incorporate audio into your website or application, by , or . However, it can also be used to create interactive instruments. With that in mind, it is suitable for both developers and musicians alike. providing atmosphere like futurelibrary.no auditory feedback on forms advanced We have a for those that are familiar with programming but need a good introduction to some of the terms and structure of the API. simple introductory tutorial There's also a article, to help you understand the way digital audio works, specifically in the realm of the API. This also includes a good introduction to some of the concepts the API is built upon. Basic Concepts Behind Web Audio API Learning coding is like playing cards — you learn the rules, then you play, then you go back and learn the rules again, then you play again. So if some of the theory doesn't quite fit after the first tutorial and article, there's an which extends the first one to help you practise what you've learnt, and apply some more advanced techniques to build up a step sequencer. advanced tutorial We also have other tutorials and comprehensive reference material available that covers all features of the API. See the sidebar on this page for more. If you are more familiar with the musical side of things, are familiar with music theory concepts, want to start building instruments, then you can go ahead and start building things with the advance tutorial and others as a guide (the above linked tutorial covers scheduling notes, creating bespoke oscillators and envelopes, as well as an LFO among other things.) If you aren't familiar with the programming basics, you might want to consult some beginner's JavaScript tutorials first and then come back here — see our for a great place to begin. Beginner's JavaScript learning module Web Audio API Interfaces The Web Audio API has a number of interfaces and associated events, which we have split up into nine categories of functionality. General audio graph definition General containers and definitions that shape audio graphs in Web Audio API usage. AudioContext The interface represents an audio-processing graph built from audio modules linked together, each represented by an . An audio context controls the creation of the nodes it contains and the execution of the audio processing, or decoding. You need to create an before you do anything else, as everything happens inside a context. AudioContext AudioNode AudioContext AudioContextOptions The dictionary is used to provide options when instantiating a new . AudioContextOptions AudioContext AudioNode The interface represents an audio-processing module like an (e.g. an HTML or element), , (e.g. a filter like , or like ). AudioNode audio source <audio> <video> audio destination intermediate processing module BiquadFilterNode volume control GainNode AudioParam The interface represents an audio-related parameter, like one of an . It can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern. AudioParam AudioNode AudioParamMap Provides a maplike interface to a group of interfaces, which means it provides the methods , , , , and , as well as a property. AudioParam forEach() get() has() keys() values() size BaseAudioContext The interface acts as a base definition for online and offline audio-processing graphs, as represented by and respectively. You wouldn't use directly — you'd use its features via one of these two inheriting interfaces. BaseAudioContext AudioContext OfflineAudioContext BaseAudioContext The ended event The event is fired when playback has stopped because the end of the media was reached. ended Interfaces that define audio sources for use in the Web Audio API. Defining audio sources AudioScheduledSourceNode The is a parent interface for several types of audio source node interfaces. It is an . AudioScheduledSourceNode AudioNode OscillatorNode The interface represents a periodic waveform, such as a sine or triangle wave. It is an audio-processing module that causes a given of wave to be created. OscillatorNode AudioNode frequency AudioBuffer The interface represents a short audio asset residing in memory, created from an audio file using the method, or created with raw data using . Once decoded into this form, the audio can then be put into an . AudioBuffer AudioContext.decodeAudioData() AudioContext.createBuffer() AudioBufferSourceNode AudioBufferSourceNode The interface represents an audio source consisting of in-memory audio data, stored in an . It is an that acts as an audio source. AudioBufferSourceNode AudioBuffer AudioNode MediaElementAudioSourceNode The interface represents an audio source consisting of an HTML5 or element. It is an that acts as an audio source. MediaElementAudioSourceNode <audio> <video> AudioNode MediaStreamAudioSourceNode The interface represents an audio source consisting of a (such as a webcam, microphone, or a stream being sent from a remote computer). If multiple audio tracks are present on the stream, the track whose comes first lexicographically (alphabetically) is used. It is an that acts as an audio source. MediaStreamAudioSourceNode MediaStream id AudioNode MediaStreamTrackAudioSourceNode A node of type represents an audio source whose data comes from a . When creating the node using the method to create the node, you specify which track to use. This provides more control than . MediaStreamTrackAudioSourceNode MediaStreamTrack createMediaStreamTrackSource() MediaStreamAudioSourceNode Defining audio effects filters Interfaces for defining effects that you want to apply to your audio sources. BiquadFilterNode The interface represents a simple low-order filter. It is an that can represent different kinds of filters, tone control devices, or graphic equalizers. A always has exactly one input and one output. BiquadFilterNode AudioNode BiquadFilterNode ConvolverNode The interface is an that performs a Linear Convolution on a given , and is often used to achieve a reverb effect. ConvolverNode AudioNode AudioBuffer DelayNode The interface represents a ; an audio-processing module that causes a delay between the arrival of an input data and its propagation to the output. DelayNode delay-line AudioNode DynamicsCompressorNode The interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once. DynamicsCompressorNode GainNode The interface represents a change in volume. It is an audio-processing module that causes a given to be applied to the input data before its propagation to the output. GainNode AudioNode gain WaveShaperNode The interface represents a non-linear distorter. It is an that use a curve to apply a waveshaping distortion to the signal. Beside obvious distortion effects, it is often used to add a warm feeling to the signal. WaveShaperNode AudioNode PeriodicWave Describes a periodic waveform that can be used to shape the output of an . OscillatorNode IIRFilterNode Implements a general (IIR)  filter; this type of filter can be used to implement tone control devices and graphic equalizers as well. infinite impulse response Once you are done processing your audio, these interfaces define where to output it. Defining audio destinations AudioDestinationNode The interface represents the end destination of an audio source in a given context — usually the speakers of your device. AudioDestinationNode MediaStreamAudioDestinationNode The interface represents an audio destination consisting of a with a single AudioMediaStreamTrack, which can be used in a similar way to a obtained from . It is an that acts as an audio destination. MediaStreamAudioDestinationNode WebRTC MediaStream MediaStream getUserMedia() AudioNode If you want to extract time, frequency, and other data from your audio, the AnalyserNode is what you need. Data analysis and visualization AnalyserNode The interface represents a node able to provide real-time frequency and time-domain analysis information, for the purposes of data analysis and visualization. AnalyserNode To split and merge audio channels, you'll use these interfaces. Splitting and merging audio channels ChannelSplitterNode The interface separates the different channels of an audio source out into a set of outputs. ChannelSplitterNode mono ChannelMergerNode The interface reunites different mono inputs into a single output. Each input will be used to fill a channel of the output. ChannelMergerNode Audio spatialization These interfaces allow you to add audio spatialization panning effects to your audio sources. AudioListener The interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization. AudioListener PannerNode The interface represents the position and behavior of an audio source signal in 3D space, allowing you to create complex panning effects. PannerNode StereoPannerNode The interface represents a simple stereo panner node that can be used to pan an audio stream left or right. StereoPannerNode Using audio worklets, you can define custom audio nodes written in JavaScript or . Audio worklets implement the interface, a lightweight version of the interface. Audio worklets are enabled by default for Chrome 66 or later. Audio processing in JavaScript WebAssembly Worklet Worker AudioWorklet The AudioWorklet interface is available via , and allows you to add new modules to the audio worklet. BaseAudioContext.audioWorklet AudioWorkletNode The interface represents an that is embedded into an audio graph and can pass messages to the corresponding . AudioWorkletNode AudioNode AudioWorkletProcessor AudioWorkletProcessor The interface represents audio processing code running in a that generates, processes, or analyses audio directly, and can pass messages to the corresponding . AudioWorkletProcessor AudioWorkletGlobalScope AudioWorkletNode AudioWorkletGlobalScope The interface is a -derived object representing a worker context in which an audio processing script is run; it is designed to enable the generation, processing, and analysis of audio data directly using JavaScript in a worklet thread. Before audio worklets were defined, the Web Audio API used the for JavaScript-based audio processing. Because the code runs in the main thread, they have bad performance. The is kept for historic reasons but is marked as deprecated and will be removed in a future version of the specification. AudioWorkletGlobalScope WorkletGlobalScope Obsolete: script processor nodes ScriptProcessorNode ScriptProcessorNode ScriptProcessorNode The interface allows the generation, processing, or analyzing of audio using JavaScript. It is an audio-processing module that is linked to two buffers, one containing  the current input, one containing the output. An event, implementing the interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data. ScriptProcessorNode AudioNode AudioProcessingEvent audioprocess (event) The event is fired when an input buffer of a Web Audio API is ready to be processed. audioprocess ScriptProcessorNode AudioProcessingEvent The represents events that occur when a input buffer is ready to be processed. Web Audio API AudioProcessingEvent ScriptProcessorNode It is possible to process/render an audio graph very quickly in the background — rendering it to an rather than to the device's speakers — with the following. Offline/background audio processing AudioBuffer OfflineAudioContext The interface is an interface representing an audio-processing graph built from linked together s. In contrast with a standard AudioContext, an OfflineAudioContext doesn't really render the audio but rather generates it, , in a buffer. OfflineAudioContext AudioContext AudioNode as fast as it can complete (event) The event is fired when the rendering of an is terminated. complete OfflineAudioContext OfflineAudioCompletionEvent The represents events that occur when the processing of an is terminated. The event implements this interface. OfflineAudioCompletionEvent OfflineAudioContext complete Obsolete interfaces The following interfaces were defined in old versions of the Web Audio API spec, but are now obsolete and have been replaced by other interfaces. JavaScriptNode Used for direct audio processing via JavaScript. This interface is obsolete, and has been replaced by . ScriptProcessorNode WaveTableNode Used to define a periodic waveform. This interface is obsolete, and has been replaced by . PeriodicWave Examples You can find a number of examples at our on GitHub. webaudio-example repo Specifications Browser compatibility AudioContext See also Tutorials/guides Basic concepts behind Web Audio API Using the Web Audio API Advanced techniques: creating sound, sequencing, timing, scheduling Autoplay guide for media and Web Audio APIs Using IIR filters Visualizations with Web Audio API Web audio spatialisation basics Controlling multiple parameters with ConstantSourceNode Mixing Positional Audio and WebGL Developing Game Audio with the Web Audio API Porting webkitAudioContext code to standards based AudioContext Libraries : a simple library for playing specific tones/notes using the Web Audio API. Tones : a framework for creating interactive music in the browser. Tone.js : a JS audio library that defaults to and falls back to , as well as providing other useful features. howler.js Web Audio API HTML5 Audio : jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more. Mooog : Web Audio API Library for Synthesizer, Effects, Visualization, Recording ... etc XSound : HTML5 video language lab web application using the Web Audio API to record and combine video and audio from different sources into a single file ( ) OpenLang source on GitHub : Simplifies web audio visualization ( ) Pts.js guide Related topics Web media technologies Guide to media types and formats on the web See also Using the Web Animations API Web Animations demos Polyfill Firefox's current implementation: AreWeAnimatedYet Browser support test Credits Source: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API Published under licence Open CC Attribution ShareAlike 3.0

Mozilla

Target

Getting Started with Web Audio API

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Quick Introduction to the Resize Observer API

6 Best Gaming Headsets Under $200

5 Studio Mixers for Home Recording

8 Best Wireless Earbuds Under $100

8 Best Wireless Earbuds Under $50

9 Best Gaming Earbuds in 2022

A Quick Introduction to the Resize Observer API

6 Best Gaming Headsets Under $200

5 Studio Mixers for Home Recording

8 Best Wireless Earbuds Under $100

8 Best Wireless Earbuds Under $50

9 Best Gaming Earbuds in 2022

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps