我正在尝试实现SoundManager 2以在此页面上播放歌曲片段。这是我当前的 JavaScript 代码:
alert('c!');
soundManager.url = 'http://www.transapine.ch/common/soundmanagerv297a-20120513/swf/soundmanager2.swf';
soundManager.flashVersion = 8; // optional: shiny features (default = 8)
soundManager.useFlashBlock = false; // optionally, enable when you're ready to dive in
/*
Example HTML to make sound snippet:
<div>
<a href="http://path.to/soundclip/sclip.mp3" class="sclip hidden"><img src="..." height="x" /></a>
</div>
*/
alert('d!');
soundManager.onready(function() {
alert('e!');
var els = $.Elements.getElementsByClassName('sclip');
var a = url = '';
var clips = new Array();
var masterVolume = 100;
for (var i=0; i<els.length; i++) {
a = els[i];
url = a.href;
clips[i] = soundManager.createSound({
id: "clip" + i,
url: url,
volume: masterVolume
});//clips[i] = soundManager.createSound({
$.Events.add(a, "click", function(e) {
e.preventDefault();
clips[i].play();
});//$.Events.add(el, "click", function() {
$.CSS.removeClass(a, 'hidden');// show the button
}//for (var i=0; i<els.length; i++) {
});//soundManager.onready(function() {
这是 HTML 页面中调用必要脚本的部分:
<script src="http://assets.momo40k.ch/common/js/$-min.js" type="text/javascript"></script>
<script type="text/javascript">alert('a!'); //these alerts are for debugging</script>
<script src="http://assets.momo40k.ch/common/soundmanagerv297a-20120513/script/soundmanager2-nodebug-jsmin.js" type="text/javascript"></script>
<script type="text/javascript">alert('b!');</script>
<script src="http://assets.momo40k.ch/common/js/soundclips.js" type="text/javascript"></script>
<script type="text/javascript">alert('f!');</script>
注意:$ 库是我用来消除浏览器差异的一个小库。
我遇到了几个问题。
1. SWF 文件
在 SoundManager 的教程中,它说使用soundManager.url
来告诉它它需要的 SWF 文件的位置。无论我给它什么值,它似乎都忽略了它,因为 Firebug 给了我以下错误:
NetworkError: 404 Not Found - http://www.transalpine.ch/portale/soundmanager2.swf
所以我尝试soundmanager2.swf
输入http://www.transalpine.ch/portale/
,错误消失了,所以我继续看看是否可以让它像这样工作。
注意:我有一个基本标记设置http://www.transalpine.ch/portale/
作为网站这一部分的基本 URL。
问题 2 和 3 是同时发生的,我只是通过一点一点的调试脚本才设法将它们分开......
2.脚本在某些情况下不执行
在那之后,什么也没有发生。我放在页面上的两个测试按钮没有按应有的方式显示(从元素$.CSS.removeClass(a, 'hidden');
中删除类hidden
,有效地显示它们),所以我开始计算正在执行的内容和不以我通常的方式执行的内容:警报!所以我发现它soundclips.js
根本没有执行,然后我发现只要clips[i] = soundManager.createSound({...});
注释掉第 28-32 行 ( ) 就可以执行。这让我感到困惑:浏览器尚未读取的内容怎么能阻止读取整个文件?!
3.soundManager.onready
不开火
删除了这些行后,我仍然遇到了最后一个问题,尽管它可能是由问题 1 引起的:事件soundManager.onready
永远不会触发。
有谁知道我的设置有什么问题,以及是什么导致了所有这些问题?我猜 2 和 3 都是从 1 派生的,但我真的不明白 1 也不明白 2 怎么可能……谢谢!