javascript - HTML5 - 当另一个音频标签开始播放时如何停止音频？

Question

我有这个 JavaScript 函数:

var currentPlayer;
function EvalSound(soundobj) {
    var thissound = document.getElementById(soundobj);
    if (currentPlayer && currentPlayer != thissound) {
        currentPlayer.pause(); 
    }
    if (thissound.paused) {
        thissound.play();
    } else {
        thissound.pause();
    }
    thissound.currentTime = 0;
    currentPlayer = thissound;
}

这个 html5 音频播放器在 Yii2 的 Gridview 小部件内循环重复(它创建了许多播放器，每个播放器都有不同的歌曲):

'value'=> function ($data){                      
    return "<audio controls>
            <source src='" . $data->ficheiro . "' type='audio/mp3' />
            </audio>";
},

问题是，当我正在播放一个音频标签并单击另一个音频标签的播放按钮时，它不会停止前一个正在播放的音频标签并开始新的音频标签。两个音频标签同时播放。我正在尝试调整 javascript 函数，但它不起作用。

我还尝试声明 var thisound = $('audio');

它也不起作用。

我需要在音频标签中添加 ID 吗？我是否需要将 onClick='EvalSound' 事件关联到音频标记？

Answer 1

好的，这是我解决的方法:

addEventListener 捕获开始播放的音频，for 循环暂停所有其他音频标签。

document.addEventListener('play', function(e) {
    var audios = document.getElementsByTagName('audio');

    for (var i = 0, len = audios.length; i < len; i++) {
        if (audios[i] != e.target) {
            audios[i].pause();
        }
    }
}, true);