JQuery and SoundManger not playing nicely

Mike Barlow - BarDev picture Mike Barlow - BarDev · Feb 15, 2011 · Viewed 10.3k times · Source

I've just stared using JQuery and SoundManger2, and I have noticed that SoundManager has problems in certain situations where JQuery is used. And it also depends if Firefox (3.6.13) or IE(8.0.7600) is being used.

All I'm trying to test is weather I can play a sound or not. In each example I will show the code first and after the code I will identify if IE and FireFox succeeded or failed.


<html> 
<head>
    <title></title>
    <script type="text/javascript" src="/Project/PublicWebSite/Scripts/soundmanager2.js"></script>
    <script type="text/javascript" src="/Project/PublicWebSite/Scripts/jquery-1.5.js"></script>    
    <script type="text/javascript">
        soundManager.debugMode = true;
        soundManager.defaultOptions.volume = 50
        soundManager.debugFlash = true; // enable flash debug output for this page
        soundManager.url = '/Project/PublicWebSite/Scripts/swf/soundmanager2.swf';
        soundManager.flashVersion = 8; // optional: shiny features (default = 8)
        soundManager.useFlashBlock = false; // optionally, enable when you're ready to dive in
        //enable HTML5 audio support, if you're feeling adventurous. iPad/iPhone will always get this.
        //soundManager.useHTML5Audio = true;
        soundManager.onready(function () {
            soundManager.createSound('helloWorld', '/Project/PublicWebSite/Content/Sounds/Chime.mp3');
            soundManager.play('helloWorld');
        });
    </script>
</head>
<body>
</body>
</html>

IE: Success; FireFox: Success


In following code everything is the same except I add the configuration for SoundManager in JQuery document load.

<html> 
<head>
    <title></title>
    <script type="text/javascript" src="/Project/PublicWebSite/Scripts/soundmanager2.js"></script>
    <script type="text/javascript" src="/Project/PublicWebSite/Scripts/jquery-1.5.js"></script>    
    <script type="text/javascript">

        $(function () {
            soundManager.debugMode = true;
            soundManager.defaultOptions.volume = 50
            soundManager.debugFlash = true; // enable flash debug output for this page
            soundManager.url = '/Project/PublicWebSite/Scripts/swf/soundmanager2.swf';
            soundManager.flashVersion = 8; // optional: shiny features (default = 8)
            soundManager.useFlashBlock = false; // optionally, enable when you're ready to dive in
            //enable HTML5 audio support, if you're feeling adventurous. iPad/iPhone will always get this.
            //soundManager.useHTML5Audio = true;
            soundManager.onready(function () {
                soundManager.createSound('helloWorld', '/Project/PublicWebSite/Content/Sounds/Chime.mp3');
                soundManager.play('helloWorld');
            });
        });
    </script>
</head>
<body>
</body>
</html>

IE: Success; FireFox: Fail


Changed the order of JQuery and SoundManger script references

<html> 
<head>
    <title></title>
    <script type="text/javascript" src="/Project/PublicWebSite/Scripts/jquery-1.5.js"></script>    
    <script type="text/javascript" src="/Project/PublicWebSite/Scripts/soundmanager2.js"></script>
    <script type="text/javascript">

        $(function () {
            soundManager.debugMode = true;
            soundManager.defaultOptions.volume = 50
            soundManager.debugFlash = true; // enable flash debug output for this page
            soundManager.url = '/Project/PublicWebSite/Scripts/swf/soundmanager2.swf';
            soundManager.flashVersion = 8; // optional: shiny features (default = 8)
            soundManager.useFlashBlock = false; // optionally, enable when you're ready to dive in
            //enable HTML5 audio support, if you're feeling adventurous. iPad/iPhone will always get this.
            //soundManager.useHTML5Audio = true;
            soundManager.onready(function () {
                soundManager.createSound('helloWorld', '/Project/PublicWebSite/Content/Sounds/Chime.mp3');
                soundManager.play('helloWorld');
            });
        });
    </script>
</head>
<body>
</body>
</html>

IE: Fail; FireFox: Success


If all I was doing was making static web pages this wouldn't be a problem. I'm creating code in asp.net MVC using layers and such and the order of how things get loaded is imporant. This is how I orginally stumbled upon this problem.

Since I'm a noob to JQuery and SoundManger, there is a very good possibility that I'm doing something wrong. If anyone has any comments of how to do this better, I would appricate any answers. I banged my head against my keyboard for a good while, before I figured this out and hope this will help someone else.


Update

When sound doesn't play I get the following info from SoundManager2

-- SoundManager 2 failed to load (security/load error) --
soundManager.disable(): Shutting down
soundManager: Failed to initialise.
soundManager: Verify that /Project/PublicWebSite/Scripts/swf/soundmanager2.swf is a valid path.
soundManager: No Flash response within expected time. Likely causes: Loading soundmanager2_debug.swf may have failed (and/or Flash 8+ not present?), Flash blocked or JS-Flash security error. See SWF output for more debug info.
soundManager: Getting impatient, still waiting for Flash...
soundManager::initMovie(): Waiting for ExternalInterface call from Flash..
soundManager::initMovie(): Got EMBED element (created via JS)
soundManager::createMovie(): Trying to load ./soundmanager2_debug.swf
-- SoundManager 2 V2.97a.20110123 (AS2/Flash 8), normal polling --

I noticed in Firebug and Fiddler that when I get this error, SoundManger tries to find soundmanager2_debug.swf @ /project/PublicWebSite/static/. The problem is that my swf files are not located there. This is where my HTML file is located.


Update

Simon, that pointed me in the correct direction. I didn't have to change anything in the soundmanger2.js file as mentioned at http://www.schillmania.com/projects/soundmanager2/doc/getstarted/#lazy-loading .
I just remove the refernce to the SoundManger script and dynamicly loaded the script using JQuery ajax call.

<html> 
<head>
    <title></title>
    <script type="text/javascript" src="/Project/PublicWebSite/Scripts/jquery-1.5.js"></script>    

    <script type="text/javascript">

        $(function () {
            $.ajax({
                url: '/Project/PublicWebSite/Scripts/soundmanager2.js',
                dataType: 'script',
                success: 
                {
                    soundManager.debugMode = true;
                    soundManager.defaultOptions.volume = 50
                    soundManager.debugFlash = true; // enable flash debug output for this page
                    soundManager.url = '/Project/PublicWebSite/Scripts/swf/soundmanager2.swf';
                    soundManager.flashVersion = 8; // optional: shiny features (default = 8)
                    soundManager.useFlashBlock = false; // optionally, enable when you're ready to dive in
                    //enable HTML5 audio support, if you're feeling adventurous. iPad/iPhone will always get this.
                    //soundManager.useHTML5Audio = true;
                    soundManager.onready(function () {
                        soundManager.createSound('helloWorld', '/Project/PublicWebSite/Content/Sounds/Chime.mp3');
                        soundManager.play('helloWorld');
                    });
                }

            });

        });
    </script>
</head>
<body>
</body>
</html>

IE: Success; FireFox: Success

BarDev

Answer

Simon picture Simon · Feb 15, 2011

The problem here is not the use of jquery in particular but the fact, that you are binding the configuration of Soundmanager2 to the DOM-ready event. Soundmanager2 itself also binds its loading routines to this event, so if your configuration code is not executed until this event occurs, it could already be too late, depending on the ordner in which the browser calls those event handlers.

I am no SM2 expert (never used it), but I've just stumbled upon a "lazy loading" feature of the manager, that could help, as it should allow you to defer the loading process of Soundmanager2 and explicitly load it after your configuration code has been called: http://www.schillmania.com/projects/soundmanager2/doc/getstarted/#lazy-loading