javascript - 使用 jPlayer 从数据库中播放音频文件

Question

我有一个为用户生成音乐文件列表的大型项目，我想使用 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"
    });

这只是加载初始文件的代码，它完全可以工作。

同样在头部，我有这个 block ，当一行被点击时，它会更改当前文件。它获取设置为行上 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"

如能深入了解我做错了什么或导致问题的原因，我们将不胜感激。

Answer 1

设置媒体并尝试在下一行播放后，插件尚未准备好播放。尝试这样的事情来尝试自动播放。

$("#jquery_jplayer_1").jPlayer("setMedia", {
    mp3: filename           
}).jPlayer("play"); // Attempts to Auto-Play the media