我的
javascript框架:jquery 1.8.3
使用mediaelement.js和播放列表播放音频(来自此主题)
mediaelement.js and custom playlist
我一直试图弄清楚如何更改脚本(在底部)使用这种列表
<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这是一个更好的方法,我愿意接受建议.
附:
如果我可以拥有上一个和下一个跟踪链接,也会是一个加号,但它不是必需的.
最佳答案 想出来并为每个人的利益发布答案.
HTML
<audio id="mejs" src="track1.mp3" type="audio/mp3" controls></audio>
<ul class="mejs-list">
<li id="track1.mp3">Track1</li>
<li id="track2.mp3">Track2</li>
<li id="track3.mp3">Track3</li>
</ul>
JavaScript的
<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.id;
$('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.match('http.*\.mp3'));
currentPlayer.play();
}
}
</script>
注意:此剂量不会验证HTML标准(WC3),但它的剂量有效,经过测试
Chrome,Safari,Firefox on Mac,最新版本
仍在寻找符合HTML标准的版本来验证.