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并使其以这种方式工作。

HTML5 - 当另一个音频标签开始播放时，音频停止

2 个答案: