このページで曲のスニペットを再生するために、 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 ファイルの場所を伝えるために使用するように指示されています。NetworkError: 404 Not Found - http://www.transalpine.ch/portale/soundmanager2.swf
Firebugsoundmanager2.swf
が次のエラーを表示したため、どのような値を指定しても無視された
http://www.transalpine.ch/portale/
ようです。
注:http://www.transalpine.ch/portale/
サイトのこのセクションでは、ベース URL としてベース タグを設定しています。
問題 2 と 3 は同時に発生したようなもので、スクリプトを少しずつデバッグすることでそれらを分離することができました...
2. 特定の条件でスクリプトが実行されない
その後、何も起こりませんでした。ページに配置した 2 つのテスト ボタンは本来あるべき姿で表示されませんでした (要素から$.CSS.removeClass(a, 'hidden');
クラスを削除しhidden
、効果的に表示します)。アラート!それで、それsoundclips.js
がまったく実行されていないことがわかりました。その後、28 行目から 32 行目 ( clips[i] = soundManager.createSound({...});
) をコメントアウトすれば実行できることがわかりました。それは私を困惑させました.ブラウザがまだ読んでいないものが、そのファイル全体の読み取りをどのように防ぐことができるでしょうか?!
3.soundManager.onready
発火しない
これらの行を削除した後も、最後の問題が残っていましたが、おそらく問題 1 が原因である可能性があります。イベントが発生しsoundManager.onready
ません。
私のセットアップの何が問題なのか、これらすべての問題の原因を知っている人はいますか? 2 と 3 はどちらも 1 から派生したものだと思いますが、1 も 2 がどのようにできるかもわかりません... ありがとうございます!