News

Use the Web Audio API and WAD library to generate sounds

Epiphany’s Stephen Griffin and Thomas Nadin show us how to produce reactive wind sounds

Epiphany’s Stephen Griffin and Thomas Nadin show us how to produce reactive wind sounds

WebAudioSounds

GET THE TUTORIAL CODE…

1. Create the sound source

To create the wind noise within Cycle Tracks, a source sound is manipulated as the ride speeds up or slows down. If you listen to the sound of air rushing past as you cycle on a bicycle, it sounds like a hissing sound not too dissimilar to radio static or a detuned TV. By leveraging the Web Audio API the site re-creates that sound effect to add to the immersion.

2. Work with WAD

A third-party JavaScript library called WAD mostly handles the Web Audio API code used within Cycle Tracks, simplifying things significantly. You can find WAD on GitHub by visiting github.com/rserota/wad where you’ll need to download the library ZIP, locate the main wad.min.js file and link to it in the head of your page.

<script src="wad.min.js"></script>

3. Play white noise

The WAD library has a white noise generator already built in, which we can access in just a few lines. Once ready to play, we simply trigger it by calling play(). This plays the white noise for 3.14 seconds, the default length of a note for any WAD sound if you do not explicitly declare values.

<script>
var wind = new Wad({
source: 'noise'
});
wind.play();
<script>

4. Configure note lengths

We can however change the default note length by assigning values to the audio envelope when we create our sound. To illustrate this, in this example we are declaring that we want to play at full volume (sustain: 1), for one second (hold: 1) and with a one second fade at the end (release: 1):

var wind = new Wad({
source: 'noise',
env: {
attack: 0,
decay: 0,
sustain: 1,
hold: 1,
release: 1
}
});

5. Apply low-pass filters

To mimic wind getting louder the faster you cycle, we crucially coupled volume with the frequency filter within Web Audio API’s BiquadFilterNode. If we use a low-pass frequency filter to cut off the hertz (Hz) frequency value to something quite low, like 100 Hz, then the wind sounds muffled. Conversely if we set it to a high value like 2,000 Hz, then it sounds brighter as the filter will be ‘open’ and all frequencies heard.

6. Dynamic frequency control

In Cycle Tracks we use the velocity data coming from Strava to dynamically control the cut off value for the low-pass filter. These frequency values are set on a note-by-note basis, so we set up the filter when we create the initial WAD, but then set the frequency value every time we play a note:

var wind = new Wad({
source: 'noise',
env: {
attack: 0,
decay: 0,
sustain: 1,
hold: 1,
release: 1
},
filter: {
type: 'lowpass',
frequency: 200
}
});
wind.play({
filter: {
frequency: 1000
}
});

7. Doing more with oscillators

Hopefully this shows how easy it is to generate dynamic sounds using the Web Audio API and the WAD library, and how audio envelopes and filters work. The same principles apply when generating more musical tones, the only difference being that you would set your sound source to one of the OscillatorNode.type values, such as sawtooth, that are available as part of the Web Audio API and WAD. Visit mzl.la/21SYejg for more.

var wind = new Wad({
source: 'sawtooth'
});

GET THE LATEST ISSUE OF WEB DESIGNER NOW


×