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並使其以這種方式工作。