javascript JQuery 和 SoundManger 不能很好地播放

Question

提问by Mike Barlow - BarDev

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.

我刚刚开始使用 JQuery 和 SoundManger2，我注意到 SoundManager 在使用 JQuery 的某些情况下存在问题。这也取决于是否使用 Firefox (3.6.13) 或 IE(8.0.7600)。

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.

我要测试的只是天气是否可以播放声音。在每个示例中，我将首先显示代码，在代码之后我将确定 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: Success; FireFox: Success

IE：成功；火狐：成功

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

在下面的代码中，除了我在 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: Success; FireFox: Fail

IE：成功；火狐：失败

Changed the order of JQuery and SoundManger script references

更改了 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: Fail; FireFox: Success

IE：失败；火狐：成功

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.

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

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.

因为我是 JQuery 和 SoundManger 的菜鸟，所以很有可能我做错了什么。如果有人对如何更好地做到这一点有任何意见，我会提供任何答案。我把头撞在键盘上很长一段时间，然后我才明白这一点，并希望这会对其他人有所帮助。

Update

更新

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

当声音不播放时，我从 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 --

-- 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(): Got EMBED 元素（通过 JS 创建）
soundManager::createMovie(): Trying加载 ./soundmanager2_debug.swf
-- SoundManager 2 V2.97a.20110123 (AS2/Flash 8)，正常轮询 --

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.

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

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.

西蒙，这为我指明了正确的方向。如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: Success; FireFox: Success

IE：成功；火狐：成功

BarDev

巴德夫

Answer 1

回答by Simon

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.

这里的问题不是特别是 jquery 的使用，而是您将 Soundmanager2 的配置绑定到 DOM-ready 事件这一事实。Soundmanager2 本身也将它的加载例程绑定到这个事件，所以如果你的配置代码在这个事件发生之前没有执行，那么可能已经太晚了，这取决于浏览器调用这些事件处理程序的顺序。

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

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

Answer 2

回答by amlutz160

i recently released an audio player framework that leverages SoundManager2 AND integrates w/ jQuery as a $.fn. -- very simple to use and/or customize.. similar to jPlayer in the front-end design, but w/ additional playback capabilities (eg RTMP streaming, full HTML5 support), examples, tests etc:

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

https://github.com/APMG/APMPlayer

javascript JQuery 和 SoundManger 不能很好地播放

提问by Mike Barlow - BarDev

回答by Simon

回答by amlutz160

相关推荐

最近更新

标签

javascript JQuery 和 SoundManger 不能很好地播放

提问by Mike Barlow - BarDev

回答by Simon

回答by amlutz160

相关推荐

javascript javascript在逗号后截断字符串

javascript 如何在页面重新加载时保留 jqGrid 中的搜索过滤器？

javascript jQuery 值选择器

javascript Jquery - 拖动时禁用选择

相关推荐

最近更新

标签