CODEWITHSUNDEEP
javascripthtmlbuttonaudioplayback
Samiul Haque Sohan
Samiul Haque Sohan

Reputation: 75

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?

Upvotes: 5

Views: 38370

Answers (3)

Samuel Liew
Samuel Liew

Reputation: 79022

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>

Upvotes: 15

Saroar Hossain Limon
Saroar Hossain Limon

Reputation: 75

Below code may help someone achieving this.

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;
            }
        });
    });
});

Upvotes: 0

Dom Kelly
Dom Kelly

Reputation: 71

<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>

Upvotes: 7

Related Questions