How to prevent several audios from playing at the same time?

Submitted by papi Jo on Thu, 01/16/2020 - 22:38
papi Jo's picture
Forums: 
Developers

I am currently working on the Dialog Cards - Audio in the Answer Feature request. In my "papi Jo" fork, the Dialog Cards activity features a "Match" mode with front & back card sides displayed side by side. If both front & back cards have an audio attached to them, 2 audio players are displayed. I would like to prevent the end-user from clicking in quick succession on both players, or rather, if one audio is playing, clicking on the other one should stop the first one.

Actually, I notice the same potential problem In the Dictation H5P activity. The end-user can click on an audio button while another audio is playing, and then both are playing at the same time, which results in cacophony.

I appreciate that this should "normally" not happen, if end-users are reasonable, but it would be better if the simultaneous play of more than one audio could be programatically prevented.

I hope Otacke can come up with some hints. Thanks in advance, Oliver!

Content types: 
Dialog cards
otacke's picture

otacke

Fri, 01/17/2020 - 00:46

Hi Papi Jo!

A general approach could work this way:

The audio elements within H5P.Audio trigger "play", "pause" and "ended" events, so you could listen to those and keep track of which element might be active and stop it when a different audio gets played.

It's probably a little more convenient if you also slightly enhance H5P.Audio. It's listening to the events as well and could "forward-trigger" those. Then you could simply listen on the H5P.Audio elements. I don't think such a pull request would be denied.

On the other hand: No two audio play buttons will ever be visible at the same time, right? Can't you simply stop all audio from playing when a card gets turned or when you move to the next? Have a look how the stopAudio function is used on the cards.

Best,

Oliver 

papi Jo's picture

papi Jo

Fri, 01/17/2020 - 11:58

1.- Yes, I understand that this would require "listening to events". However I'm not sure I can program those.

2.- I'd rather not tamper with the H5P.Audio library.

3.- In "normal" modes, you are correct, not more than one play button is visible at the same time, since we are displaying either the front or the back of a card. HOwever, as I mentioned in my original post, in my "papi Jo" Dialog Cards fork, I have added a "match" mode. In that mode, I display the front of a card and the back of another card (or the same card) side by side, for the user to match them. In that particular mode, 2 audio play buttons could be visible at the same time, hence my problem.

4.- If you considered solving the problem in your H5P.Dictation activity, in order to prevent more than one audio (accidentally) playing at the same time, then I could use your solution. Please let me know.

Thanks,

papi Jo

otacke's picture

otacke

Fri, 01/17/2020 - 20:47

Hi Papi Jo!

I'm not close to a dev machine this weekend, but you should be able to retrieve the audio elements from H5P.Audio's constructor (cmp. https://github.com/h5p/h5p-dialogcards/blob/ac15f2b495a0e055e88a1496298f63fa4bd4711e/src/scripts/h5p-dialogcards-card.js#L136) or even by using querySelector/querySelectorAll if you want to add listeners. Just keep an array of all audio elements, add the appropriate play listener and let it stop all audio elements except the one that's calling.

I don't know when I will find some time to add something similar to Dictation.

Best,

Oliver 

otacke's picture

otacke

Wed, 01/22/2020 - 12:39

Hi papi Jo!

I believe that you already figured out how to stop audio. Well, thanks to you mentioning the shortcoming of Dictation, I improved the behavior as you suggested.

Best,
Oliver