audio.jsというjQueryのプラグインを使って、複数の再生リストを設置したいです。
(audio.js⇒ http://kolber.github.io/audiojs/)
上記のページのExample5が同一ページ内に複数あるイメージです。
こちらのサンプルを参考に、audio.jsを設置し、htmlのhead内には以下のようなスクリプトを記述しています。
lang
1 $(function() { 2 // Setup the player to autoplay the next track 3 var a = audiojs.createAll({ 4 trackEnded: function() { 5 var next = $('ol li.playing').next(); 6 if (!next.length) next = $('ol li').first(); 7 next.addClass('playing').siblings().removeClass('playing'); 8 audio.load($('a', next).attr('data-src')); 9 audio.play(); 10 } 11 }); 12 13 // Load in the first track 14 var audio = a[0]; 15 first = $('ol a').attr('data-src'); 16 $('ol li').first().addClass('playing'); 17 audio.load(first); 18 19 // Load in a track on click 20 $('ol li').click(function(e) { 21 e.preventDefault(); 22 $(this).addClass('playing').siblings().removeClass('playing'); 23 audio.load($('a', this).attr('data-src')); 24 audio.play(); 25 }); 26 // Keyboard shortcuts 27 $(document).keydown(function(e) { 28 var unicode = e.charCode ? e.charCode : e.keyCode; 29 // right arrow 30 if (unicode == 39) { 31 var next = $('ol li.playing').next(); 32 if (!next.length) next = $('ol li').first(); 33 next.click(); 34 // back arrow 35 } else if (unicode == 37) { 36 var prev = $('ol li.playing').prev(); 37 if (!prev.length) prev = $('ol li').last(); 38 prev.click(); 39 // spacebar 40 } else if (unicode == 32) { 41 audio.playPause(); 42 } 43 }) 44 });
また、body内は以下のようになっています。
lang
1<div id="audio_1"> 2 <p>Sample</p> 3 <audio preload="none"></audio> 4 <div class="list"> 5 <ol> 6 <li><a href="#" data-src="audio/sample1.mp3">sample1</a></li> 7 <li><a href="#" data-src="audio/sample2.mp3">sample2</a></li> 8 <li><a href="#" data-src="audio/sample3.mp3">sample3</a></li> 9 </ol> 10 </div> 11</div> 12<div id="audio_2"> 13 <p>Sample</p> 14 <audio preload="none"></audio> 15 <div class="list"> 16 <ol> 17 <li><a href="#" data-src="audio/sample4.mp3">sample4</a></li> 18 <li><a href="#" data-src="audio/sample5.mp3">sample5</a></li> 19 <li><a href="#" data-src="audio/sample6.mp3">sample6</a></li> 20 </ol> 21 </div> 22</div>
こちらを実行した結果、audio_2のsample4をクリックすると、audio_1のオーディオで再生され、audio_2のオーディオは動きませんでした。
sample1〜3は、audio_1で再生されました。
audio.jsの読み込み時にaudio要素が<div id="audio_wrapper#(Noが連番で入る)"で囲まれ、CSSでデザインされたプレイヤーが作られるのですが、audio_1はaudio_wrapper0、audio_2はaudio_wrapper1が振られています。
このうちのaudio_wrapper0でしか再生ができないようだったので、idを置き換えるスクリプトを作ってみたり、クラスで割り振るスクリプトを書いてみたりしたのですが、うまくいきませんでした。
jQuery含め、あまりプログラミングの知識がなく恐縮ですが、アドバイスいただけるとうれしいです。
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/06/15 05:42
2015/06/15 07:23
2015/06/16 06:34
2015/06/16 08:09
2015/06/16 08:29
2015/06/16 09:02
2015/06/17 08:33