Making Noise With HTML5 Web Audio
The HTML5 web audio specification goes back to late 2011. It’s another feature being added into the browsers to the delight of some and to disdain of others. Some people think the focus with the browsers should be to go fix features and APIs rather than adding new ones.
I don’t have any opinions about what direction they should take with the browsers. Within the software companies people don’t usually want to hear “Lets fix X so this thing works better” so they focus most of their energies on adding in new cruft. I’m pretty sure the browser makers don’t care to deal with a bunch of stranger’s opinions about the free software they’re putting out when they have their own plans for their product.
The web audio API looks pretty comprehensive to me with all kinds of functions to manipulate the audio as it plays. I put together some demos on how to play with oscillators mainly.
You can see it here at https://github.com/tcrowe/triocillate.
It was pretty fun messing around with the APIs and making sounds. Being so new to audio programming it took some time to understand the paradigm.
It has a similar concept to streams where one function feeds into another in a chain. Each part in the chain can alter the output.
Make a noise#
To make a simple oscillator you use the browser’s
AudioContext function to create the other functions.
var audioCtx = new window.AudioContext(), oscillator = audioCtx.createOscillator(); oscillator.connect(audioCtx.destination); oscillator.frequency.value = 528; oscillator.start();
- Check your volume first
- 528 is a popular frequency among audio people
These are some examples of some UIs I put together to aid in my noise making. The virtual-dom was fun to play with along side this, as an aside. I even learned that some people think that frequencies can be used to heal the body, including DNA repair, mood, and well-being.
I put that to the test with my Solfeggio scale noise maker. It’s not pure tones from that scale. The sound still was quite mesmerizing!
The range input
input[type=range] was a good tool for messing with numeric inputs at whatever resolution I needed. Probably the hardest thing that I dabbled on was the reverb/convolution/impulse mess. I tried to make my own but it was a failure. The wav files I found on the internet were sufficient.
single frequency oscillator#
multiple frequency oscillator#
solfeggio noise maker with reverb impulse and funky additional sine wave#
Be well, and enjoy making noises!