Digital Logic

White Noise and HTML 5

by on May.25, 2011, under Personal, Web Design

I’ve been looking for a high-quality white noise (more specifically rain) generator for a while now. Some recordings are available for purchase or download, or even to listen to via Flash player, but none of them seem to meet my expectations. It recently dawned on me that I can simply use the recorded sounds from the various games that I play. These are professionally recorded sound bytes that can be strung together to form the illusion of an infinitely long soundscape.

At first I thought of creating a client application that one could use to loop and adjust these sounds. Now, I’m sure that somewhere, this program already exists, but it’s far more fun to experiment and try something new. It occurred to me that the newly supported HTML5 audio tag might be useful; there’s no need to create a UI or worry about audio threads as these functions are all handled by the browser. The fact that it’s on the web means it’s accessible from everywhere as well.

It turns out that while the audio tag supports a looping function, said loop is not gapless (at least for wav playback) in any browser. That is, there is an audible silence between when the track ends and when it starts again. There are a few ways around this, and most of them involve a small amount of Javascript.

Click here to see my white noise demo.

The background rain in the above player is actually composed of two audio tags. The sound plays for 8 seconds (it’s a 9 second sound file), after which the second player starts and resets the first player. The audio “bounces” back and forth between the two players to create the illusion of infinitely falling rain. You may notice some occasional clicks if you listen for a while; this is because the Javascript engine is falling behind. Unfortunately, this is unavoidable.

The thunder is actually several more audio tags (each with a different thunder sound effect) that are triggered at random intervals. This serves to cover up any pops between the rain loop, and also to keep any subconscious patterns from forming in the underlying rain sounds (all while making the entire scene more exciting). I haven’t added a function to disable the thunder at this point, but the delay between “strikes” can be set to an arbitrarily high number.

Either way, for an hour or so’s work, I’m very impressed with the result, and will no doubt be listening to it when I head to bed tonight.

Leave a Reply

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Visit our friends!

A few highly recommended friends...