New patterns for media apps

2022-11-03T00:00:00Z

Let's welcome our new collection of media patterns to help you create modern media experiences on the web for great audio and video playback:

We hope these patterns will help you build amazing apps, and we're looking forward to your feedback! You can provide feedback by tweeting at @ChromiumDev or filing an Issue.

Photo by Kenny Eliason.

How to add effects to audio

2022-10-10T00:00:00Z

The modern way #

The Web Audio API uses the AudioContext() interface to manage sources, filters, and destinations. Once you’ve created a new AudioContext(), create an audio source node, like an AudioBufferSourceNode or OscillatorNode. As an example, consider a basic oscillator with a low pass filter applied.

Browser support

Chrome 35, Supported 35
Firefox 25, Supported 25
Edge 12, Supported 12
Safari 14.1, Supported 14.1

Source

Using the `createBiquadFilter()` method #

First, create a new AudioContext(). Then create an audio source node, like an AudioBufferSourceNode or OscillatorNode. You'll create a sine oscillator node, for this example, which has a frequency of 420 hertz from the moment it starts playing.

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioCtx.createOscillator()
oscillator.type = 'sine';
 // Value is in hertz.
oscillator.frequency.setValueAtTime(420, audioCtx.currentTime);

Next, create an effect node using createBiquadFilter(). Set the type to lowpass and the frequency to start one second after the start of playback. Then connect the biquadFilter to the oscillator.

const biquadFilter = audioCtx.createBiquadFilter();
biquadFilter.type = 'lowpass';
biquadFilter.frequency.setValueAtTime(200, audioCtx.currentTime + 1);
oscillator.connect(biquadFilter);

Finally connect the biquadFilter to the destination of the audioCtx, before starting the oscillator and stopping it after two seconds of playback.

biquadFilter.connect(audioCtx.destination);
oscillator.start();
oscillator.stop(2);

The sound from the oscillator is passed through the unaffected filter, and on to the destination, which is your computer's speakers. After one second of playback, the lowpass filter comes into effect. After two seconds, the oscillator is stopped.

Browser support

Chrome, Not supported
Firefox, Not supported
Edge, Not supported
Safari, Not supported

### Other available filters and effects

Other filter nodes can be added to an AudioContext to create different effects:

createWaveShaper() is used to add distortion to a source.
createGain() is used to boost the overall signal of the source it's applied to.
createConvolver() is most commonly used to add reverb to a source.
createDelay() is used to add delay to the start of a source.
createDynamicsCompressor() is used to raise the volume of the quietest part of a source, and lower the volume of the loudest parts.
createPanner() and createStereoPanner() are used for changing the spatial position of sound output.

The classic way #

Before the availability of the Web Audio API, there was no way to add effects to audio in the browser. Workarounds using server-side rendering and switching between streams are possible, but this can incur a lot of network overhead.

Using the audio element #

The only audio effects that can be directly controlled are playback and volume.

const audio = document.querySelector('audio');
 // Sets audio volume to 50%
audio.volume = 0.5;
// Doubles the playback rate.
audio.playbackRate = 2;

Browser support

Chrome 3, Supported 3
Firefox 3.5, Supported 3.5
Edge 12, Supported 12
Safari 3.1, Supported 3.1

Source

Tony Conway on web.dev

New patterns for media apps

How to add effects to audio

The modern way #

Using the `createBiquadFilter()` method #

The classic way #

Using the audio element #

Further reading #

Demo #

Tony Conway on web.dev

New patterns for media apps

How to add effects to audio

The modern way #

Using the createBiquadFilter() method #

The classic way #

Using the audio element #

Further reading #

Demo #

Using the `createBiquadFilter()` method #