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);

Answer 2

您没有唯一的方法来识别<audio> 标签。使用通用的$("audio")seelctor 会使问题变得更糟。对所有标签使用id 并使其以这种方式工作。