JavaScript 按钮停止页面上的所有音频
Posted
技术标签:
【中文标题】JavaScript 按钮停止页面上的所有音频【英文标题】:JavaScript Button Stop All Audio on Page 【发布时间】:2015-07-09 02:35:00 【问题描述】:我正在使用来自 mixlr.com 的嵌入播放器来播放音频。现在我需要一个按钮来停止整个站点的音频。虽然播放器有它自己的播放暂停按钮。但我需要我自己的按钮来控制整个网站的音频,如果我点击暂停按钮,它将暂停我的整个网站的音频。有人可以帮帮我吗?
【问题讨论】:
Mozilla 网站可能会有所帮助:developer.mozilla.org/en-US/docs/Web/Guide/html/… 【参考方案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" />
【讨论】:
【参考方案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>
【讨论】:
当我为我的音乐库网站使用音频标签时,这非常方便在播放另一首曲目时停止所有声音。【参考方案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;
);
);
);
【讨论】:
以上是关于JavaScript 按钮停止页面上的所有音频的主要内容,如果未能解决你的问题,请参考以下文章
为啥我的停止按钮在这个 javascript 音频播放器上不起作用?