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

}，是对的）；

Answer 2

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