时间:2011-05-16 13:17:26

标签: javascript jquery ajax html5 jplayer

我有一个大型项目,可以为用户生成音乐文件列表,我希望在点击文件时使用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"
    });

这只是加载初始文件的代码,它完全有效。

同样在头部,我有这个块在单击一行时更改当前文件。它获取md5哈希值,该哈希值被设置为行上的id并将其传递给返回文件路径的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"

对于我做错了什么或者导致问题的原因,我们将非常感激。

1 个答案:

答案 0 :(得分:2)

设置媒体然后尝试播放以下行后,插件将无法播放。尝试这样的尝试自动播放。

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