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

Frequency tester:

UI examples

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

/img/triocillate/single-frequency.png

multiple frequency oscillator

/img/triocillate/multiple-frequencies.png

solfeggio noise maker with reverb impulse and funky additional sine wave

/img/triocillate/solfeggio-noise-maker.png

Be well, and enjoy making noises!

Author Tony Crowe, Salt Lake City, UT
top
home
Attribution
Lato font by Łukasz Dziedzicwww.latofonts.com/team
Roboto font by Christian Robertson, Google Incchristianrobertson.comwww.google.com/fonts
Inconsolata font by Raph Levien, Google Incwww.levien.comwww.google.com/fonts
hexo: fast, simple & powerful blog frameworkhexo.io
ace editorace.c9.io
virtual-domwww.npmjs.com/package/virtual-dom
Black Granite Water Droplets, William Warbyhttps://www.flickr.com/photos/wwarby