我刚刚开始使用 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/