我试图在同一网页上播放音频文件列表,只有一个文本链接作为播放按钮,我找到了以下解决方案,它对我来说真的很完美:(感谢@linstantnoodles这个脚本!
<audio id="song1" preload='auto'>
<source src='song1.mp3' type='audio/mp3' />
</audio>
<audio id="song2" preload='auto'>
<source src='song2.mp3' type='audio/mp3' />
</audio>
<a href="javascript:null()" id="song1-control">Listen</a>
<a href="javascript:null()" id="song2-control">Listen</a>
<script type="text/javascript">
// List of audio/control pairs
var playlist = [{
"audio": document.getElementById('song1'),
"control": document.getElementById('song1-control')
}, {
"audio": document.getElementById('song2'),
"control": document.getElementById('song2-control')
}];
for (var i = 0; i < playlist.length; i++) {
var obj = playlist[i];
var audio = obj.audio;
var control = obj.control;
// returns a closure
var listener = function (control, audio) {
return function () {
var pause = control.innerHTML === 'Pause';
control.innerHTML = pause ? 'Listen' : 'Pause';
// Update the Audio
var method = pause ? 'pause' : 'play';
audio[method]();
// Prevent Default Action
return false;
}
};
control.addEventListener("click", listener(control, audio));
}
</script>
我对这段代码的唯一问题是,如果一首歌正在播放,而我开始第二首歌,那么两首歌都会同时播放。我已经尝试了很多方法来解决这个问题,但没有一种奏效 - 我需要如何适应它,以便第一个在第二个开始时暂停或停止?谢谢!
你可以做这样的事情。启动新音频时,循环遍历 playlist
数组以查找所有不是刚开始的音频元素并停止它们。
下面是一个示例:
....
var method = pause ? 'pause' : 'play';
audio[method]();
if(!pause){
playlist.forEach(function(pl){
if(pl.audio !== audio){
pl.audio.pause();
pl.audio.currentTime = 0;
pl.control.innerHTML = 'Listen';
}
});
}
....