javascript - JQuery 和 SoundManger 运行不佳

标签 javascript jquery internet-explorer firefox soundmanager2

我刚刚开始使用 JQuery 和 SoundManger2,我注意到 SoundManager 在使用 JQuery 的某些情况下会出现问题。它还取决于是否使用 Firefox(3.6.13)或 IE(8.0.7600)。

我想要测试的是我是否可以播放声音。在每个示例中,我将首先显示代码,在代码之后我将确定 IE 和 FireFox 是成功还是失败。


<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:成功; FireFox:成功


在下面的代码中,除了我在 JQuery 文档加载中添加了 SoundManager 的配置之外,一切都是相同的。

<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:成功; FireFox:失败


更改了 JQuery 和 SoundManger 脚本引用的顺序

<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:失败; FireFox:成功


如果我所做的只是制作静态网页,这就不成问题了。我正在使用层等在 asp.net MVC 中创建代码,并且加载内容的顺序很重要。这就是我最初偶然发现这个问题的方式。

由于我是 JQuery 和 SoundManger 的菜鸟,所以很有可能我做错了什么。如果有人对如何做得更好有任何意见,我会提供任何答案。在我弄清楚这一点之前,我用头撞了键盘很长一段时间,并希望这对其他人有帮助。


更新

当声音不播放时,我从 SoundManager2 获取以下信息

-- SoundManager 2 加载失败(安全/加载错误)--
soundManager.disable(): 关闭
soundManager:初始化失败。
soundManager:验证/Project/PublicWebSite/Scripts/swf/soundmanager2.swf 是否为有效路径。
soundManager:在预期时间内没有 Flash 响应。可能的原因:加载 soundmanager2_debug.swf 可能失败(和/或 Flash 8+ 不存在?)、Flash 被阻止或 JS-Flash 安全错误。请参阅 SWF 输出以获取更多调试信息。
soundManager:不耐烦了,还在等待Flash...
soundManager::initMovie(): 等待来自 Flash 的外部接口(interface)调用..
soundManager::initMovie(): 获得 EMBED 元素(通过 JS 创建)
soundManager::createMovie(): 尝试加载 ./soundmanager2_debug.swf
-- SoundManager 2 V2.97a.20110123 (AS2/Flash 8),正常轮询 --

我在 Firebug 和 Fiddler 中注意到,当我收到此错误时,SoundManger 会尝试查找 soundmanager2_debug.swf @/project/PublicWebSite/static/。问题是我的 swf 文件不位于那里。这是我的 HTML 文件所在的位置。


更新

西蒙,这为我指明了正确的方向。我不必更改 soundmanger2.js 文件中的任何内容,如 http://www.schillmania.com/projects/soundmanager2/doc/getstarted/#lazy-loading 中所述。 .
我只是删除了对 SoundManger 脚本的引用,并使用 JQuery ajax 调用动态加载该脚本。

<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:成功; FireFox:成功

酒吧开发

最佳答案

这里的问题不是特别使用 jquery,而是事实上,您将 Soundmanager2 的配置绑定(bind)到 DOM-ready 事件。 Soundmanager2 本身也将其加载例程绑定(bind)到此事件,因此,如果您的配置代码直到此事件发生才执行,则可能已经太晚了,具体取决于浏览器调用这些事件处理程序的顺序。

我不是 SM2 专家(从未使用过它),但我刚刚偶然发现了管理器的“延迟加载”功能,这可能会有所帮助,因为它应该允许您推迟 Soundmanager2 的加载过程并显式加载调用配置代码后: http://www.schillmania.com/projects/soundmanager2/doc/getstarted/#lazy-loading

关于javascript - JQuery 和 SoundManger 运行不佳,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5001287/

相关文章:

javascript - 消息管理器 API sendAsyncMessage 回调

javascript - 使用 Promise 控制 VueJ 中的事件流

JavaScript:访问在外部 .js 文件中定义的变量

javascript - Highcharts : How to update Plotoptions pointStart on Ajax call?

javascript - 从另一个 div 的导航更改一个 div 的内容

IE11 中排序函数的 Javascript 语法错误

html - 文本区域 CSS {高度 : 100%} in table-cell div (IE)

javascript - 使用 classList 从 JavaScript 在 Web 组件中动态添加类

javascript - 如何在 Bootstrap 3 中制作 3 行导航栏

javascript - 在没有 JQuery 的 IE 中使用 Javascript 检索 "Placeholder"值