JavaScript 按钮停止页面上的所有音频

Question

我正在使用来自 mixlr.com 的嵌入播放器来播放音频。现在我需要一个按钮来停止整个站点的音频。虽然播放器有它自己的播放暂停按钮。但我需要我自己的按钮来控制整个网站的音频，如果我点击暂停按钮，它将暂停我的整个网站的音频。有人可以帮帮我吗？

Answer 1

一键暂停所有音频：

document.getElementById('stopButton').onclick = function() {
  var sounds = document.getElementsByTagName('audio');
  for(i=0; i<sounds.length; i++) sounds[i].pause();
};

<audio src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" controls autoplay loop>
  Your browser does not support the <code>audio</code> element.
</audio>

<audio src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" controls autoplay loop>
  Your browser does not support the <code>audio</code> element.
</audio>

<audio src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" controls autoplay loop>
  Your browser does not support the <code>audio</code> element.
</audio>

<input id="stopButton" type="button" value="Stop All Audio" />

Answer 2

<script type="text/javascript">
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);

</script>

Answer 3

以下代码可能会帮助某人实现这一目标。

var audioMap = new Map();
var rappers = document.querySelectorAll('.rapper');
rappers.forEach(function(rapper){
    audioMap.set(rapper, new Audio());
    rapper.addEventListener('click', function(){
        var audio = new Audio($(this).data('audio'));
        audio.play();
        audioMap.set(this, audio);
        var current = audioMap.get(this);
        // console.log('get', current);
        audioMap.forEach(function(audio){
            if( audio != current ){
                audio.pause();
                audio.currentTime = 0;
            }
        });
    });
});