ユーザーの音楽ファイルのリストを生成する大規模なプロジェクトがあり、jPlayer のインスタンスを使用して、ファイルがクリックされたときにファイルを再生したいと考えています。
現在、これはページの先頭にあるコードです。
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3" //test file
});
},
ended: function (event) {
$(this).jPlayer("play");
},
swfPath: "/js",
supplied: "mp3"
});
これは初期ファイルをロードするための単なるコードであり、完全に機能します。
また、先頭には、行がクリックされたときに現在のファイルを変更するこのブロックがあります。行の ID として設定された md5 ハッシュを取得し、それをファイル パスを返す php ファイルに渡します。これをfirebugで確認したところ、有効なパスが返されているようです。
$("tr").click(function() {
var md5 = $(this).attr("id");
var filename = "";
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
filename = xmlhttp.responseText;
}
}
xmlhttp.open("GET","md5tofilename.php?md5="+md5,true);
xmlhttp.send();
$("#jquery_jplayer_1").jPlayer("setMedia", {
mp3: filename
});
$("#jquery_jplayer_1").jPlayer("play");
return false;
});
});
何らかの理由で、行をクリックしても新しいファイルは再生されませんが、現在のファイルは設定解除されます。jPlayer は時刻を「0:00」に設定し、ファイルがロードされていないかのように動作します。
参考までに、生成された行の例を次に示します。
<tr id="bbac3c5090c5ca76ce7a02b8112dec0a" class="row1">
...
</tr>
そして、テスト値の php ファイルを呼び出すことからの応答:
GET http://localhost/md5tofilename.php?md5=1234567890 200 OK 36ms
"http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3"
私が間違っていることや問題の原因についての洞察をいただければ幸いです。