SoundManager 2 Basic Examples

Wondering where to start? The following are some simple examples showing how to get started with SoundManager 2.

If you're wondering "How to include this script in my page?", see this bare-bones template which should have the minimal, stripped-down code and instructions you need to get started.

Once you have SM2 included in your page, you merely need to hook into its onload/onerror events:

soundManager.onload = function() {
  // soundManager is ready to use.
  // createSound() / play() etc. can now be called
}

soundmanager.onerror = function() {
  // Oh no! No sound support.
  // Maybe configure your app to ignore sound calls.
  // (SM2 calls will silently return false after this point.)
}

A note about initialization

Keep in mind SoundManager's core methods (createSound, etc.) will not be available until soundManager.onload() fires. The initialization time for SM2 can vary across browsers/platforms, and should effectively be assumed to be "asynchronous." Because of this, it is recommended you write your code to handle soundManager.onload() being called either before or after window.onload().

If you wish to have SM2 always wait for window.onload() before calling soundManager.onload()/onerror(), you can apply the following:

soundManager.waitForWindowLoad = true;

Debug Output, disabling and minified versions

SoundManager 2 has debug mode enabled by default and will write to agents supporting console.log-style debugging, and/or a custom <div> element in the absence of a console.

To disable debug output, set soundManager.debugMode as follows:

Alternately, you may use the no-debug, minified version of the SM2 javascript library (which has internal debug code removed, and will silently return false.)

Demo 1a: Create + play (simple method)

soundManager.play('mySound0','../mpc/audio/AMB_SN_5.mp3');

Do this

Creates and plays a sound with ID "mySound0", at the specified URL. The sound can then be referenced by that ID later, eg. soundManager.play('mySound0');

Note that this method is only provided for convenience, and allows only ID and URL as parameters. If you want to specify other options (volume, loop, event handlers), you must use the object literal syntax as given below.

Demo 1b: Create + play (better method)

soundManager.createSound({
 id:'mySound1',
 url:'../mpc/audio/CHINA_1.mp3'
});
soundManager.play('mySound1');

Do this

Creates, then plays a sound. This object literal method allows for other parameters to be used (see demo 2)

Variant: Use object returned from createSound() (best method)

var aSoundObject = soundManager.createSound({
 id:'mySound2',
 url:'../mpc/audio/CHINA_1.mp3'
});
aSoundObject.play();

Do this

Creates, then plays a sound. This object literal method allows for other parameters to be used (see demo 2)

Demo 2: Create with onfinish event handler + play with volume argument

var demo2Sound = soundManager.createSound({
 id:'mySound4',
 url:'../mpc/audio/CHINA_1.mp3',
 onfinish:function() {
   alert(this.sID+' finished playing');
 }
});
demo2Sound.play({volume:50});

Do this

(creates, then plays a new sound - a function is called when the sound finishes playing)

Demo 3: Play a pre-existing sound

soundManager.play('aDrumSound');

Do this

This plays an existing sound which was created by soundManager.onload() (for reference, view source of this page.)

Demo 4a: Play a sequence of sounds via "onfinish", with multiShot

soundManager.play('aDrumSound',{onfinish:function(){soundManager.play('aCymbalSound');}})

Differently formatted:

soundManager.play(
 'aDrumSound',
 {
  onfinish:function() {
    soundManager.play('aCymbalSound');
  }
 }
);

Do this

This will play an existing sound (created in-page), and uses the "onfinish" handler to make a call to play a second, pre-existing sound.

Also note that the button can be clicked multiple times, and the sound will be "layered" as multiShot is enabled for both of these sounds when using Flash 9. An onfinish event will also fire as each sound finishes.

Bug/behaviour note: Whenever "play" is called on a SMSound object, any parameters passed in will apply to all currently-playing instances of the sound if multiShot is allowed. For example, the onfinish handler from demo 4a will apply to demo 3 if 4a is started while 3 is still playing.

Demo 4b: Create and play a sequence of new sounds via "onfinish"

soundManager.createSound({
 id:'aBassDrum',
 url:'../mpc/audio/AMB_BD_1.mp3',
 multiShot:false,
 onfinish:function() {
   soundManager.play('aRimSound','AMB_RIM1.mp3');
 }
});
soundManager.play('aRimSound');

Do this

This will crate and play a new sound, using the "onfinish" handler to create and play a second, new sound.

It is recommended to create sound objects first, to simplify troubleshooting.

Demo 5: Set sound parameters, then play

var sound = soundManager.getSoundById('chinaCymbal'); // predefined/preloaded sound
sound.setPosition(500); // 500 msec into sound
sound.setPan(-75);      // 75% left pan
sound.play();

Do this | Play from position:0

This will set the position of an existing, pre-loaded sound, then play it.

Variant: play()

var sound = soundManager.getSoundById('chinaCymbal');
sound.play({position:500,pan:-75});

Do this | Play from position:0

Note that if planning to layer sounds with multiShot (Flash 9 only), this variant method will give best results as each new "channel" is started with parameters.

SoundManager 2 Demos