SoundManager 2 Template Example

This is a basic template for adding SoundManager to your page.

How it works

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.url = '/path/to/sm2-flash-movies/'; // directory where SM2 .SWFs live

// Note that SounndManager will determine and append the appropriate .SWF file to the URL.

// disable debug mode after development/testing..
// soundManager.debugMode = false;

// Option 1: Simple createSound method

soundManager.onload = function() {
  // SM2 has loaded - now you can create and play sounds!
  soundManager.createSound('helloWorld','/path/to/hello-world.mp3');
  soundManager.play('helloWorld');
};

// Option 2: More flexible createSound method (recommended)

soundManager.onload = function() {
  var mySound = soundManager.createSound({
    id: 'aSound',
    url: '/path/to/an.mp3'
    // onload: [ event handler function object ],
    // other options here..
  });
  mySound.play();
}

// Option 2b: More flexible onready + createSound methods (good for multiple use cases)

soundManager.onready(function(oStatus) {
  // check if SM2 successfully loaded..
  if (oStatus.success) {
    // 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();
  }
});

</script>

Making SM2 wait for window.onload()

If you prefer to have the library wait for window.onload() before calling soundManager.onload()/onerror() methods, you can modify SM2's "waitForWindowLoad" property:

soundManager.waitForWindowLoad = true;

Disabling debug output

SoundManager 2 will write to a debug <div> element or a javascript console if available, by default. To disable it, simply set the relevant property to false:

soundManager.debugMode = false;

To see related configuration code, refer to the source of this page which basically does all of the above "for real."

Troubleshooting

If SM2 is failing to start and throwing errors due to flash security, timeouts or other issues, check out the troubleshooting tool which can help you fix things.

No-debug, compressed version of soundmanager2.js

Once development is finished, you can also use the "minified" (60% smaller) version of SM2, which has debug output and comments removed for you: soundmanager2-nodebug-jsmin.js. If you can, serve this with gzip compression for even greater bandwidth savings!