我有这样的代码（例如）：
<script>
$('audio').mediaelementplayer();
</script>
<audio id="mejs" controls="controls">
<source src="/media/file-2.mp3" type="audio/mp3" />
</audio>
<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>
我需要按队列播放列表中的音频文件（一个接一个）。
我怎么能够播放完当前文件后更改列表中下一个文件的音频源并开始播放下一个文件？
Update: 相关主题mediaelement.js 和播放列表 https://stackoverflow.com/questions/6395265/how-can-i-get-html5-audio-playlist-with-mediaelement-js但答案是使用许多 mediaelementplayer() 实例。
制作代码mediaelement.js 的基本播放列表:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 MediaElement</title>
<script src="../build/jquery.js"></script>
<script src="../build/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="../build/mediaelementplayer.min.css" />
<style>
.mejs-list li:hover {
background: #ffa;
cursor: pointer;
}
.mejs-list li.current {
background: #cddfff;
}
</style>
<script>
$(function(){
$('video,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>
</head>
<body>
<audio id="mejs" src="../media/audio-01.mp3" type="audio/mp3" controls="controls"></audio>
<ul class="mejs-list">
<li class="current">../media/audio-01.mp3</li>
<li>../media/audio-02.mp3</li>
<li>../media/audio-03.mp3</li>
</ul>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
