我的JavaScript框架:jQuery 1.8.3
使用mediaelement.js和playlist播放音频(来自这个线程) mediaelement.js和自定义播放列表
我一直在尝试弄清如何更改脚本(在底部),以使用这种类型的列表:
<ul class="mejs-list">
<li class="current"><a href="/media/file-1.mp3">Nice Name for file1</a>
other random text or html/img, file description etc </li>
<li><a href="/media/file-2.mp3">Nice Name for file2</a>other text or html/img</li>
<li><a href="/media/file-3.mp3">Nice Name for file3</a>other text or html/img</li>
</ul>
取而代之
<ul class="mejs-list">
<li>/media/file-1.mp3</li>
<li class="current">/media/file-2.mp3</li>
<li>/media/file-3.mp3</li>
</ul>
这个脚本可以将列表转换为播放列表,并且运行良好,但是它创建的链接显示完整路径。我更喜欢从链接中获取src而不仅仅是li里面的文本,这样我可以使用更好的名称。
<script>
$(function(){
$('audio').mediaelementplayer({
success: function (mediaElement, domObject) {
mediaElement.addEventListener('ended', function (e) {
mejsPlayNext(e.target);
}, false);
},
keyActions: []
});
$('.mejs-list li').click(function() {
$(this).addClass('current').siblings().removeClass('current');
var audio_src = $(this).text();
$('audio#mejs:first').each(function(){
this.player.pause();
this.player.setSrc(audio_src);
this.player.play();
});
});
});
function mejsPlayNext(currentPlayer) {
if ($('.mejs-list li.current').length > 0){ // get the .current song
var current_item = $('.mejs-list li.current:first'); // :first is added if we have few .current classes
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('if '+audio_src);
}else{ // if there is no .current class
var current_item = $('.mejs-list li:first'); // get :first if we don't have .current class
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('elseif '+audio_src);
}
if( $(current_item).is(':last-child') ) { // if it is last - stop playing
$(current_item).removeClass('current');
}else{
currentPlayer.setSrc(audio_src);
currentPlayer.play();
}
}
</script>
如果有更好的使用jQuery和mediaelement.js的方法,欢迎提出建议。
附注:
如果可以添加上一曲和下一曲链接,那将是一个加分项,但不是必需的。