Need to click the play/pause button twice when using multiple players?

[djs79]

Hello,
I've searched everywhere, but cannot seem to find an answer to this question:

I have multiple players on a single page.

When you click a play button on any player, all of the other players pause so that only one player plays at a time. Here's the code I'm using for that:

document.addEventListener('play', function(e){
    var player = document.getElementsByTagName('audio');
    for(var i = 0, len = player.length; i < len;i++){
       if(player[i] != e.target){
         player[i].pause();
       }
    }
}, true);

Here's my issue... when the other players are set to "pause", you have to click them twice to get them to play again. The first click seems to just un-pause it (and changes the icon back to the play icon) and it's the 2nd click that starts to play the file.

I'm hoping there's a solution where you can start another player by simply clicking once, and it will automatically pause all of the other players.

I've tested this in Chrome, Firefox and IE.

Is this possible?
Thanks - any help is appreciated!

[yonycat]

I meet your question too. But i have solved it. audiojs is bind to window obejct, so it is a global varibale that you can use audiojs in any where of your code once you have reference it in your page.

There is a instances property on audiojs which store all the audiojs instance of your page,
so when you play one of the audio, you can use following code to close other audiojs instance.
Object.keys(audiojs.instances).forEach((player) => { audiojs.instances[player].pause() }) })
And the clicked button will play or pause the clicked audiojs instance, so the sound of this clicked
audio will be played or paused. The reasone is that the audiojs source code has add a click function
on play/pause button to control the playing state of audio tag.
Forgive my poor english, hope you can get it and solve your problem.

And you can see a demo on this link:https://www.rouchi.com/teachers.html

[jakniktinny]

@alicepan I have the same problem as djs79. Could you send more detailed information where and what code I should past to have this functionality working?

[Nomta]

Thank @alicepan for good idea! I have implemented it this way:

audiojs.events.ready(function() { var as = audiojs.createAll({ play: function() { var mp3 = this.mp3; Object.keys(audiojs.instances).forEach(function(audio) { var audio = audiojs.instances[audio]; if (audio.mp3 == mp3) return; audio.pause(); audio.wrapper.classList.remove('playing'); }); this.wrapper.classList.add('playing'); } }); });