javascript - 当一个音轨开始播放时，如何停止另一音轨？ (只有文字链接)

Question

我试图在同一网页上播放音频文件列表，仅使用文本链接作为播放按钮，我找到了以下解决方案，该解决方案对我来说非常完美: (感谢 @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>

这段代码的唯一问题是，如果正在播放一首歌曲，而我开始播放第二首歌曲，则两首歌曲都会同时播放。我尝试了很多方法来解决这个问题，但没有一个有效 - 我需要如何调整它，以便第一个问题在第二个问题开始时暂停或停止？谢谢!

Answer 1

你可以做这样的事情。当一个新的音频开始时，循环遍历 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';
        }
    });
}
....