HTML5 Noise synthesis

I made some audio synthesis – specifically white noise – and made some interesting mistakes on the way. Play with it below! Warning: It’s loud!



playblend slowly


Things are progressing well with our new baby, and it’s both a blessing and a curse that she needs everything we can provide for her! Because I’m a programmer/technologist, I’ve tried to work out ways that I can help her with those tools. One of the ways I’ve done that is to help her sleep by making noise. We were astonished to learn that babies actually sleep much better with (surprisingly loud) white noise playing in their immediate environment, I guess to block out any patterns they could latch on to and get excited by. There are already dozens of great apps for Android and iOS that play white noise, but we didn’t want to surrender our phones to the baby for the night, so I built a simple html5 app that runs on an old laptop in the crib.

At first I used a simple looping MP3 of white noise, but there was a jump every time the clip looped that would often startle her awake. I took this as a cue that it was time to properly investigate the “Webkit Audio context”, which is the way to generate dynamic audio in HTML5. I’ve included two approaches approaches here. The first is a buffer-based approach, and what I ultimately went with. If you just want generated white noise in HTML5, this is the one to go with. The second is an oscillator-based one, which I’ll explain in more detail below.

I’m new to the Webkit audio context – I’ve done quite a lot of dabbling in audio previously – most recently in code via Flash – but starting a long time ago in a neat little program called Jeskola Buzz. It was my first introduction to a node-based audio editing system, and for that matter, my first introduction to a node-based system of any kind. It’s interesting to see that this node-based approach has remained the norm for manipulating audio.

What are nodes?

Nodes are little components that each do a piece of work before passing their output on to the next node. In Buzz, nodes were ‘machines’, and they were split into ‘generators’ and ‘effects’ – generators were responsible for creating the sounds in the first place – like a drum or an electric piano, and effects were applied on top – like an echo or a distortion filter. It’s largely the same in HTML5, except the in-built machines are simpler. Instead of a piano you’ve got a simple signal generator, which can play a frequency and be set to the three common wave types – sine, square and sawtooth.

White noise is useful for babies because it’s the most effective way to drown out any other sounds. It’s impossible to discern any patterns in it so it’s also unlikely to keep you up. White noise is composed of an random and equal mixing of sounds of all frequencies (similar to the way white light.)

At first I thought the oscillator was the only way to generate audio from scratch in Webkit, so I tried mixing my own noise. The principle is simple: Mix a few dozen oscillators with a random pitch together, and randomly reassign the pitches at frequent intervals.

It works! Well, kind of. If you switch tabs, which results in slowing the execution of the frequency changes down, it starts to sound pretty crazy. Try it out on the sample above. Cool, but not exactly restful for babies. That’s when I went back to the drawing board and found the buffer-based solution, which allows you to put direct values in, and yielded the result that we’re currently using.

It’s just a first step toward dynamic audio in HTML5, but I’m enjoying what I see (and hear) so far, so I look forward to doing more of it soon!