One sound at a time -- HTML5 Audio

[failbot8000]

Hello,

I am having trouble getting my audio to stop playing when I perform a second action.

Here is my html code:

<img src="picture1.png" style="cursor:pointer" onClick="chooseSound(0,0)">
<br /> <br /> <br />
<img src="picture2.png" style="cursor:pointer" onClick="chooseSound(0,1)">

And my javascript code is:

function chooseSound(first, second)
{
 	setTimeout("stopallSounds()",1);
 	for (var i=0; i < DemoSounds.length; i++)
	{
 		if ( DemoSounds[i].index0==first && DemoSounds[i].index1==second )
		{
 			playthisSound(DemoSounds[i].id);
		}
	}
}


function stopallSounds()
{
 	for (var i=0; i < DemoSounds.length; i++)
	{
 		stopthisSound(DemoSounds[i].id)
	}
}

function stopthisSound(someSound)
{
    var mysound = document.getElementById(someSound);
    mysound.currentTime = 0;
    mysound.pause();
}

function playthisSound(someSound)
{
    var mysound = document.getElementById(someSound);
    mysound.load();
    mysound.play();
}

The array in question is given by:

var DemoSounds = 
[{ "index0" : "0" , "index1" : "0", "id" : "Audio00" },		
{ "index0" : "0" , "index1" : "1", "id" : "Audio01" },
{ "index0" : "0" , "index1" : "2", "id" : "Audio02" },
{ "index0" : "0" , "index1" : "3", "id" : "Audio03" },
{ "index0" : "1" , "index1" : "0", "id" : "Audio10" },
{ "index0" : "1" , "index1" : "1", "id" : "Audio11" },
{ "index0" : "1" , "index1" : "2", "id" : "Audio12" },
{ "index0" : "1" , "index1" : "3", "id" : "Audio13" },];

All the IDs are defined in a separate file called audio html that I include using php. The problem is that while I can click on each image and play their respective audio, it doesn't necessarily stop the other audio from playing. Also, for some reason, I can't call stopallSounds() without putting it in a Timeout.

What am I doing wrong? How can I improve it? I don't want to use jQuery, or else I would have posted this question there!

Thanks everyone!

[xelawho]

there is, I imagine, some <audio> element that is playing the sound.

generally the way to go here is to give that audio element an ID, use the .pause() method, assign it a new src (for the sound that you now want to play) and start playback again with .play()

but it seems as if you have multiple <audio> tags? why?

[failbot8000]

Originally Posted by xelawho

but it seems as if you have multiple <audio> tags? why?

Well, this is really just a test page for a larger site.

The larger site is a single container, with two columns. Each column has content loaded into it by the user pressing buttons, consisting of differing amounts of text and pictures.

Depending on what picture, AND the content around it, when the user clicks on the picture, a specific audio sequence needs to play.

Thus, if the user loaded the first batch of content in the right column, and is playing audio, but in the middle decides to load the second...the audio from the first still plays and I want it to stop instead.

But I don't know if that's a valid reason for having multiple audio tags. It was just an easy way to keep everything straight when I was building everything...

[xelawho]

mmm...

but equally. the audio tag exists independently of the pictures or text or whatever that is used to trigger playback. Maybe I'm being thick, but I still can't see why you need multiple audio tags when you can just have all your onclicks pointing towards one element.

anyway. I was just looking at this and it seems there is another step in the process from what I described above:

If you have changed the src attribute of the media element since the page was loaded, you must call load() before play(), otherwise the original media plays again.

if you really do need to go down the multiple audio tags road, I would suggest setting a variable that "remembers" which element was the last one played, then calling pause on that one before beginning playback on the new one.

[failbot8000]

Originally Posted by xelawho

mmm...

but equally. the audio tag exists independently of the pictures or text or whatever that is used to trigger playback. Maybe I'm being thick, but I still can't see why you need multiple audio tags when you can just have all your onclicks pointing towards one element.

if you really do need to go down the multiple audio tags road, I would suggest setting a variable that "remembers" which element was the last one played, then calling pause on that one before beginning playback on the new one.

Okay. So, what your saying is, I need to have only ONE audio element, and depending on what the user clicks, change the src of the element, reload, set time to zero, then play?

So, I will put the src into the "id:" spot instead, and then simply call the audio element a second time (with a new src now). Hopefully, this second call will halt the first audio from playing?

I think I was being thick by defining multiple audio tags before....

But if I did continue down the multiple audio tag route...shouldn't what I had above do the same thing as having memory? (ie stopping everything regardless?)

[xelawho]

For one audio element I would say the process would be:
- .pause() the element
- change the source
- .load() the element
- .play() the element

I doubt that setting time to zero is as important as stopping playback of the previous sound.

Looking at your code, it would seem that it should stop everything from playing. Dunno why it doesn't.

If it gets really confusing, try taking the code back to basics and building it up from there.

[rnd me]

simply stop them all before you play the new one...

function stopAllAudio(){
  [].slice.call(document.getElementsByTagName("audio")).map(a){
    a.pause();
 });
}