Digital Logic

Web Design

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 Comment more...

Grinding My Gears: Bad Site Layouts

by on Jun.04, 2009, under Web Design

In my daily life I come across hundreds of websites. Most of them are pretty good. Some of them are not. So, as a new “whenever I feel like it” kind of a section, I’m going to throw in some sites that could use fixes. First up, Ctrl+Alt+Delete Comics. Now I know a while back that this particular web comic was tossed aside (something about having too much emotion and too little humor), but I’ve kind of stuck with it. I’ve also noticed that the site could use a new design, or at least some effort to fix the old one. Let’s take a look.

Internet Explorer 8

Mozilla Firefox 3

Mozilla Firefox 3 with AdBlock Plus

Wait a second, what is that? Your header bar seems to have become misaligned, making it painfully obvious that it is in fact, three different sections. What I don’t understand is the fact that the rest of the header was moved up when the image was removed. Oh wait, now I see it. The designer of the CAD comics website seems to have used tables and spacer gifs for the header (and, in fact, most of the page). Now, while this might have been an acceptable way to create web layouts in the 1990′s, it has now been more than a decade since CSS was introduced. The page hasn’t changed much since November of 2005. It’s time for an update, and the new layout should display correctly regardless of what is on the page.

And that’s what really grinds my gears.

2 Comments :, , more...

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...