Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript Button Stop All Audio on Page

I'm using a embed player from mixlr.com to play audio. Now I need a button to stop the whole site's audio. Though the player have it's own play pause button. But I need my own button to control the whole site's audio where if i click on pause button it'll pause my whole site's audio. Can anybody help me please?

like image 971
Samiul Haque Sohan Avatar asked Dec 01 '22 00:12

Samiul Haque Sohan


1 Answers

Pause all audio with one button:

document.getElementById('stopButton').addEventListener('click', () => {
  document.querySelectorAll('audio').forEach(el => el.pause());
});
<audio src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" controls loop></audio>
<audio src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" controls loop></audio>
<audio src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" controls loop></audio>

<div>
  <input id="stopButton" type="button" value="Stop All Audio" />
</div>
like image 175
Samuel Liew Avatar answered Dec 05 '22 00:12

Samuel Liew