1.5 The Web Audio API - Equaliser, visualisations, loading into memory
Writing an equaliser using biquad filters
Uses BiquadFilter nodes with type="peaking".
Frequencies inside the range get a boost or an attenuation; frequencies outside it are unchanged.
Three properties you can control: frequency (middle of the target frequency range) gain (boost in dB) and Q (wisth of the target frequency band.
2D real time visualizations: waveforms
Create an analyser node, set options (fftSize, bufferLength), then create an animatin loop to draw on the canvas
Working with sound samples loaded in memory
- No streaming/decoding in real time means less CPU is used,
- With all samples in memory it's possible to play them in sync with very high accuracy,
- It's possible to make loops, add effects, change the playback rate, etc.
- And of course, if they are in memory and uncompressed, there is no wait time for them to start playing: that are ready to be used!
AUDIOBUFFERSOURCENODE
It's properties: buffer, loop, loopstart, looped playbackRate, detune.
Notice in the code that each time we click on the button, we rebuild the audio graph.
Suggest libraries
- HowlerJS: useful for loading and playing sound sample in video games. Can handle audio sprites (multiple sounds in single audio files), loops, spatialization. Very simple to use.
- Webaudiox, and in particular a helper built with this library, jsfx for adding 8bits such as procedural sounds to video games, without the need to load audio files.
- For writing musical applications, take a look at ToneJS !