Question

在我的页面中有许多mp3链接，我使用的是jplayer。如何点击单独的链接更新jplayer功能？

$(document).ready(function() {

 $("#jquery_jplayer_1").jPlayer({

    ready: function(event) {
        $(this).jPlayer("setMedia", {
            mp3: "test_1.mp3",   //my mp3 file

        });
    },
    swfPath: "http://www.jplayer.org/2.1.0/js",
    supplied: "mp3"
  });
});

我的mp3链接：

<a href="javascript:listen(1);" class="jp-play" ></a>
<a href="javascript:listen(2);" class=" jp-play" ></a>
<a href="javascript:listen(3);" class=" jp-play" ></a>
<a href="javascript:listen(4);" class=" jp-play" ></a>
<a href="javascript:listen(5);" class=" jp-play" ></a>

Answer 1

嘿，你可以做到以下几点。

我在页面加载时实例化播放器：

jQuery("#jquery_jplayer_1").jPlayer({
swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
supplied: "mp3",
wmode: "window",
preload:"auto",
autoPlay: true,
errorAlerts:false,
warningAlerts:false
});

然后在一个侦听器中，每个项目都是唯一的，你需要：A）获取曲目名称/ URL，我想你应该能够解决这个问题。

B）将曲目传递给setMedia

jQuery("#jquery_jplayer_1").jPlayer("setMedia", {
mp3: "http:xxxx.rackcdn.com/"+track+".MP3"
});

C）播放曲目

jQuery("#jquery_jplayer_1").jPlayer("play");

要获取曲目ID，您需要在可播放的项目上安装听众（可能是一个可播放的课程？）并从该曲目中获取曲目。

Answer 2

HTML：

<a href="test_1.mp3" class="jp-play"></a>
<a href="test_2.mp3" class="jp-play"></a>

JS：

$(document).ready(function() {
   readMP3("test_1.mp3");// play one mp3 if document is loaded

    $(".jp-play").click(function(event){
        event.preventDefault();
        readMP3($(this).attr("href"));
    })

});

function readMP3(_src){
 $("#jquery_jplayer_1").jPlayer({
    ready: function(event) {
        $(this).jPlayer("setMedia", {
            mp3: _src,
        });
    },
    swfPath: "http://www.jplayer.org/2.1.0/js",
    supplied: "mp3"
  });
}

使用jplayer在单个页面中的多个mp3链接

2 个答案: