This is a basic template for adding SoundManager to your page.
This page includes the SM2 script, which starts up on its own as appropriate. By default it will try to start as soon as possible.
The minimal code needed to get SoundManager 2 going is below, with configurable parts:
<!-- include SM2 library -->
<script type="text/javascript" src="/path/to/soundmanager2.js"></script>
<!-- configure it for your use -->
<script type="text/javascript">
soundManager.setup({
url: '/path/to/sm2-flash-files/', // directory where SM2 .SWFs live
/*
* Note that SoundManager will determine and append the appropriate .SWF file to the URL,
* eg. /path/to/sm2-flash-files/soundmanager2.swf automatically.
* You should not put soundmanager2.swf in there yourself.
*/
// Beta-ish HTML5 audio support (force-enabled for iPad), flash-free sound for Safari + Chrome. Enable if you want to try it!
// useHTML5Audio: true,
// do this to skip flash block handling for now. See the flashblock demo when you want to start getting fancy.
useFlashBlock: false,
// disable debug mode after development/testing..
// debugMode: false
});
// Option 1: Simple onready() + createSound() method
soundManager.onready(function() {
// SM2 has loaded - now you can create and play sounds!
soundManager.createSound('helloWorld','/path/to/hello-world.mp3');
soundManager.play('helloWorld');
});
// Option 2 (better): More flexible onready() + createSound() method
soundManager.onready(function() {
var mySound = soundManager.createSound({
id: 'aSound',
url: '/path/to/an.mp3'
// onload: [ event handler function object ],
// other options here..
});
mySound.play();
});
// Option 3 (best): onready() + createSound() / ontimeout() methods for success/failure:
soundManager.onready(function() {
// SM2 has loaded - now you can create and play sounds!
var mySound = soundManager.createSound({
id: 'aSound',
url: '/path/to/an.mp3'
// onload: [ event handler function object ],
// other options here..
});
mySound.play();
});
soundManager.ontimeout(function() {
// (Optional) Hrmm, SM2 could not start. Show an error, etc.?
});
</script>
It's good to let users see the flash component of SM2, so those with flash blockers can unblock it and allow SM2 to start. For more info on this, see the Flashblock example.
window.onload()If you prefer to have the library wait for window.onload() before making onready() / ontimeout() callbacks, you can specify waitForWindowLoad: true.
SoundManager 2 will write debug output via console.log() if available, by default. To disable it, simply specify debugMode: false.
You can also write HTML-based debug output to the DOM via consoleOnly: false and/or useConsole: false.
To see related configuration code, refer to the source of this page which basically does all of the above "for real."
If SM2 is failing to start and throwing errors due to flash security, timeouts or other issues, check out the troubleshooting tool for tips.
Once development is finished, you can also use the "minified" (down to ~8% of original size with gzip!) version of SM2, which has debug output and comments removed for you: soundmanager2-nodebug-jsmin.js. Serve with gzip compression wherever possible for best bandwidth savings.