SoundManager 2: Lazy Loading Example

This is an example of dynamically loading SoundManager 2 using JS, after window.onload() has fired.

How it works

This page waits until window.onload(), delays 1 second and loads soundmanager2.js, which should then start up.

+ +

SoundManager 2 status: Waiting for window.onload()...

+ +

window.onload = function() {
+  // Window loaded, waiting 1 second...
+  setTimeout(function() {
+    // Loading soundmanager2.js...
+    loadScript('../../script/soundmanager2.js',function() {
+      // SM2 script has loaded
+      soundManager.url = '../../swf/';
+      soundManager.onready(function() {
+        if (soundManager.supported()) {
+          soundManager.createSound({
+            id:'foo',
+            url:'../_mp3/mouseover.mp3'
+          }).play();
+        }
+        // msg(soundManager.supported()?'started OK':'Loaded OK, but unable to start: unsupported/flash blocked, etc.');
+      });
+      soundManager.beginDelayedInit(); // ensure start-up in case document.readyState and/or DOMContentLoaded are unavailable
+    });
+  },1000);
+}

+ +

Handling flash blockers

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.

+ +

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!

+ +