An HTML5 Music Visualizer for Dev:Unplugged

HTML5 is Here

Although HTML5 is still in development, the latest generation of popular browsers (those released within the past month or so) support a surprisingly consistent set of HTML5 features.  This allows developers to start seriously targeting the future standard and taking advantage of its many benefits.

The Contest

Microsoft is currently running a contest called {Dev:Unplugged} that gives Web developers the opportunity to showcase their HTML5 skills.  Entrants have the option of creating a game or music-related site, and compete for some awesome prizes.  On May 9, an expert team of judges will start evaluating entries based on several criteria such as creativity, quality, and fit with the contest theme.

My Entry: html5beats.com

What it is

html5beats is a music visualizer that generates real time animations that respond to the beat of the music.  In the past you had to use Flash or embedded media players to accomplish this.  With HTML5 you can do it with JavaScript and markup alone.

How it works

To synchronize audio and video, you must have access to the raw audio data.  Unfortunately, browsers don’t offer provide this access in a consistent way (and some don’t offer it at all).  I wrote a small C# program that preprocesses the sound files and I add the output (RMS amplitude) to a JavaScript file.  It doesn’t need to be high resolution (8 bit, 40Hz) so it works out to only about 20KB per song.  At first I thought I invented this method, but I Googled around and discovered that someone else beat me to it.  Nevertheless, it works well in practice and provides interesting results.

Features

Cross-browser compatibility

The following browsers are officially supported:

• Internet Explorer 9 (recommended)
• Chrome 10
• Opera 11
• Firefox 4

You can try other browsers with varying results.  Some will trigger a compatibility message, while others (like Firefox 3.6) will mostly work, but the site won’t look as good.

Full screen mode

The HTML5 canvas does not explicitly support full screen.  I solve this problem by using a second canvas that fills the entire page.  The image from the smaller main canvas is copied to the larger one every frame.  This may sound inefficient, but it performs well in all my tests.

Lyrics

This feature displays lyrics as the song plays, and can be turned on or off.  Although the canvas supports text directly, drawing straight to the canvas would interfere with some of the inter-frame effects I’m using.  Therefore, I position a div element over the canvas and change its inner text dynamically.

Pinned site features

Internet Explorer 9 offers a great new feature called “pinned sites” that provide Windows 7 desktop integration.  I’ve taken advantage of several pinned site features that enhance the user experience under IE9.

Feature detection and discoverability

If you’re browsing with IE9, html5beats will detect it and prompt you to try pinning the site.  If you don’t like seeing this prompt you can close it.  Pinning your site adds a high-quality icon to the taskbar and gives you access to additional functionality.

Jump List

Right-clicking the taskbar icon shows a Jump List with tasks that can take you directly to a specific page within the site, even if the browser isn’t currently open.

Thumbnail Toolbar

This is one of the coolest aspects of pinning the site.  Hovering over the taskbar reveals playback buttons so you can play, pause, and navigate songs even when the browser doesn’t have focus.

Update: Previous Track and Next Track buttons have been added for additional control of the player.

CSS3

Until now, effects like rounded corners, shadows, and translucency were only available through browser-specific features, custom images, and elaborate CSS trickery.  CSS3 makes those techniques obsolete.  html5beats exploits CSS3 to improve the aesthetics of the main UI.

Using the Code

For now I’m disallowing use of the code, mainly to prevent someone from using it in a competing entry.  After the contest ends I plan on cleaning it up a bit and releasing it under an open-source license.

Please Consider Supporting the Site with Your Vote

In addition to a earning a high score from the judges, winning requires votes from the community.  If you like my entry, please vote for it today… there’s only one week left!  Also, look forward to new features and updates in the coming days – this is the home stretch.