-
ID:c44F/O さんの質問

こちらのオーディオプレイヤー（ttp://kolber.github.io/audiojs/demos/test6.html）を実装したのですが、1ページで複数のプレイヤーを使いたい場合、どのようにソースを修正すればいいのでしょうか。
複数のolがあっても、ol内の全liが一つのプレイヤーのリストに入ってしまいます。
全体を囲んでいるdivのIDを変更したり、olにIDを割り振ろうとしたりしてみたのですがうまくいかず、行き詰まってしまいました。
あまりJSに詳しくないので、アドバイスいただきたいです。

みんなの回答 5 件

ID:iGt2zK さんの回答

普通にExample 1がそれに該当しませんか？
ID:c44F/O

example1見てみました。
ロード中、再生可能、再生不可のプレイヤーがそれぞれ並んでいるだけに見えるのですが、ここにヒントがあるのでしょうか…。

ID:c44F/O

すみません、ロードが終わったら一番上も再生可能になりました。
ここにさらに再生リストが追加できるといいのですが…。

ID:c44F/O さんの回答

上記の方にアドバイスいただいたので、sample1のソースと比較してみました。
sample1の方で記載されているスクリプト（↓）
<script>
　audiojs.events.ready(function() {
　var as = audiojs.createAll();
});
</script>-->
をHTMLに追加してみたのですが、そうすると該当のaudio部分に一つ余計に<div id="audio_wrapper0">という要素が作られてしまい（<div id="audio_wrapper0">の中に<div id="audio_wrapper1">が作られる）、ロードし続けてしまいます。
上記のスクリプトを消すと、最初のaudio部分は正常に表示＆再生されますが、次の箇所のaudioがロード＆曲を選択すると最初のaudio部分で再生される、という状況です。
（<div id="audio_wrapper0">が複数作られることはありません）
JSファイルはそのまま使用、HTMLも該当箇所は同じように記述しており、スクリプト追加で不明な階層のボックスが作られる理由がわかりません…。
お知恵を貸していただきたいです。
ID:c44F/O

複数ボックスについては解決しました。
再生リストを作成するために、下記のようなスクリプトを記述しているため、複数ボックスが作成されたようです。
<script>
$(function() {
// Setup the player to autoplay the next track
var a = audiojs.createAll({
trackEnded: function() {
var next = $(’ol li.playing’).next();
if (!next.length) next = $(’ol li’).first();
next.addClass(’playing’).siblings().removeClass(’playing’);
audio.load($(’a’, next).attr(’data-src’));
audio.play();
}
});

// Load in the first track
var audio = a[0];
first = $(’ol a’).attr(’data-src’);
$(’ol li’).first().addClass(’playing’);
audio.load(first);

// Load in a track on click
$(’ol li’).click(function(e) {
e.preventDefault();
$(this).addClass(’playing’).siblings().removeClass(’playing’);
audio.load($(’a’, this).attr(’data-src’));
audio.play();
});
// Keyboard shortcuts
$(document).keydown(function(e) {
var unicode = e.charCode ? e.charCode : e.keyCode;
// right arrow
if (unicode == 39) {
var next = $(’li.playing’).next();
if (!next.length) next = $(’ol li’).first();
next.click();
// back arrow
} else if (unicode == 37) {
var prev = $(’li.playing’).prev();
if (!prev.length) prev = $(’ol li’).last();
prev.click();
// spacebar
} else if (unicode == 32) {
audio.playPause();
}
})
});
</script>

再生リストを使用するためには上記のスクリプトが必要なのですが、これが複数箇所のプレイヤー設置を不可にしていました。
そこで再生リスト（ol）にクラスを振り分けて実行しようと思い、下記のようなスクリプトを書いてみたのですが、クラスは追加されるものの、オーディオの読込み＆再生がされませんでした。

jQuery(function(){
　$(’#list1’).click(function(){
　　$(’#list1 .list’).addClass(’now’);
　　$(’#list2 .list’).removeClass(’now’)
　});
});)

アドバイスをお願いします。。

ID:c44F/O

jQuery(function(){
　$(’#list1’).click(function(){
　　$(’#list1 .list’).addClass(’now’);
　　$(’#list2 .list’).removeClass(’now’)
　});
});
です。

ID:c44F/O

クラスを追加して切り替えるやり方だと、やはり最初のaudioに全て集約されてしまうようです…。
他に良い方法はないでしょうか…。
有識者の皆様のお力をお借りしたいです…。

ID:c44F/O さんの回答

どなたかわかる方いらっしゃいませんでしょうか…。
ID:ZqV.WP さんの回答

Example 1にあるように、
<audio preload="auto"><source src="音楽ファイルのURL"></audio>
を増やしていったらいいだけじゃねえの？
ID:SXv4uX さんの回答

このソースをカスタマイズするよりは、自分でゼロからコード書いた方が早いと思うよ。大して難しくはない。まぁソースが理解できないから悩んでるんだろうが…。$(’ol li’) っていうい一般的なタグに対してイベントを設定してるから切り分けができないんだなーとかをまず理解しないとな。あと audio っていう変数が何を指してるかをちゃんと追わないと。
最終更新日:2015-06-04 (2,475 views)

関連するトピックス

ページ上部に戻る