Javascript Sound API

The Missing Element

One of the things that may be missing from the DHTML/CSS side of the web (subject to your opinion - blink tags and animated fireball GIFs aside,) is sound. Aside from embedding a single AU, MP3 or MIDI file your options are pretty limited; there isn't much you can expect to reliably embed across platforms, yet alone control on a page without plug-ins of some sort.

Granted, not every page should audibly scream bloody murder at every mouse move, click or drag; it's an effect (pun not intentional, nor funny) that should be applied conservatively at best. Used appropriately however, the addition of sound should enhance an "experience" without trashing it.

Scriptability

Macromedia has provided methods for scripting the Flash plug-in for many years, the only notable issue being with support across certain browsers and platforms.

Despite this, a large population of the user base has Flash installed along with their browser (mostly Internet Explorer or Mozilla,) both of which support Javascript-to-Flash communication (i.e. "are scriptable".) This extends to Windows (and Linux with Firefox) from what I have seen.

If you can live with having a few silent pages on the Mac and like the idea of script-driven sound elsewhere, this might be your kind of thing.

Approach

In trying to make something flexible and reuseable, here's the resulting process:

  • Script API instantiates Flash "stub" loader movie (~3 KB)
  • Flash stub loads audio files (MP3 etc.,) and assigns IDs according to an XML file - ie. <sound id="mySound" href="soundfile.mp3" />
  • API calls control audio, eg. soundManager.play('mySound');
  • Noise of developer's choice starts playing
  • User gets annoyed, closes page .. Nevermind.

Result

For lack of a better name at this point, this API has retained its original name taken from the development of this site - "SoundManager".

Enough blabbering, here's the SoundManager Flash Sound API project page. Some enjoyable breaking-glass sounds are on included; click and smash to your heart's content.

Related links