A JavaScript Sound API supporting MP3, MPEG4 and HTML5 Audio.

Getting started

Basic SoundManager 2 set-up

Including the script, configuring the url and registering an onready() callback:

<script src="soundmanager2.js"></script>
<script>
soundManager.setup({
  // where to find flash audio SWFs, as needed
  url: '/path/to/swf-files/',
  onready: function() {
    // SM2 is ready to play audio!
  })
});
</script>

Upon execution of soundmanager2.js, SM2 will determine what Flash SWF to load (if any) based on the path defined in soundManager.url.

After successful initialization, soundManager.onready() will fire and sounds can be played.

By default, SM2 uses a Flash 8-based SWF build. Some additional features are available when using the Flash 9-based build.

For a live example, see the basic template demo.

Playing audio

Basic playback control

Once soundManager.onready() has fired, sounds can be loaded and played.

Creating and playing a sound object

// create "mySound"...
soundManager.createSound({
  id: 'mySound',
  url: '/path/to/an.mp3'
});

// ...and play it
soundManager.play('mySound');

Additional options and events can be specified when loading and playing sounds. For more examples of playback features, see API Demos.

Bonus

Additional demos

Examples using multi-track playback, progress and combinations of sound and animation:

• SURVIVOR remake

  

• MPC (Drum Machine)

  

• Christmas Lights

  

"Audio sprites" (sound segments / samples) demo

With sound playback options like from and to, you can play portions of a larger, single-file "sprite" of many sounds.

For more live examples, see the API Demos.

Elsewhere

As heard on TV the internets

A few nifty places SoundManager 2 has been seen in use on the Wild World Web:

Articles and presentations

Some other words, pictures and video on the subject of HTML5 and web audio:

• Video, 02/2012: Web Audio: HTML5 + Flash (in a tree) (slides.) Updated HTML5 content, demos and SURVIVOR C64 game demo.
• Video presentation: Adding Sound To HTML (slides) (12/2011)
• Video: Probably, Maybe, No: The State of HTML5 Audio + turntable demo (05/2011)
• 24ways.org article, The State Of HTML5 Audio (12/2010)

Credits and thank-yous

• Icons: Desktop / mobile / iOS device iconography via glyphish.com (CC). Tile background: "Tiny Grid". Homepage header typeface: Chunk (Five) by Meredith Mandel (OFL).
• Music: Seven Or Eight Days courtesy of Adrian Glynn. Graffiti Sex courtesy of The Fugitives, from the album In Streetlight Communion. I Tried and People Asking courtesy of SonReal.