JQuery 和 SoundManger 不能很好地播放

Posted

技术标签:

【中文标题】JQuery 和 SoundManger 不能很好地播放【英文标题】：JQuery and SoundManger not playing nicely 【发布时间】：2011-02-15 08:26:39 【问题描述】：

我刚刚开始使用 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 的 ExternalInterface 调用.. 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 文件所在的位置。

更新

Simon，这为我指明了正确的方向。如http://www.schillmania.com/projects/soundmanager2/doc/getstarted/#lazy-loading 所述，我不必更改soundmanger2.js 文件中的任何内容。 我只是删除了对 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：成功

BarDev

【问题讨论】：

【参考方案1】：

这里的问题不在于 jquery 的使用，而在于您将 Soundmanager2 的配置绑定到 DOM-ready 事件。 Soundmanager2 本身也将其加载例程绑定到此事件，因此如果您的配置代码在此事件发生之前未执行，则可能已经为时已晚，具体取决于浏览器调用这些事件处理程序的顺序。

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

【讨论】：

【参考方案2】：

我最近发布了一个音频播放器框架，它利用 SoundManager2 并将 w/jQuery 集成为 $.fn。 -- 使用和/或定制非常简单.. 类似于前端设计中的 jPlayer，但具有额外的播放功能（例如 RTMP 流、完整的 HTML5 支持）、示例、测试等：

https://github.com/APMG/APMPlayer

【讨论】：

以上是关于JQuery 和 SoundManger 不能很好地播放的主要内容，如果未能解决你的问题，请参考以下文章

jQuery 在 Windows Phone 8 手机间隙应用程序中不能很好地渲染角落

jQuery-UI 的自动完成不能很好地显示，z-index 问题

jQuery .attr() 改变视频高度不能正常工作

MVC中使用jquery的浏览器缓存问题

具有不透明度的 jQuery 动画

使用 PHP ajax 和 jQuery 插入每个函数