1

Question: I have 2 audio sounds and I want to play one HTML5 audio element at a time.

Similar Post: Play one HTML audio element at a time.

I saw a similar post to my question. However, as a JavaScript beginner I did not understand the code. So I tried a simpler way so I can understand, but is not working. I would appreciate any suggestions.

HTML5 code: (For this example only I used the same audio source as a previous post: http://jsfiddle.net/RE006/8djstmvy/

<div>
<h2>Example 1</h2>
<audio id="sound1" src=http://geo-samples.beatport.com/lofi/5005876.LOFI.mp3 controls="controls" preload="none">
<p>Your browser does not support the audio element.</p>
</audio>
</div>

<div>
<h2>Example 2</h2>
<audio id="sound2" src=http://geo-samples.beatport.com/lofi/5005933.LOFI.mp3 controls="controls" preload="none">
<p>Your browser does not support the audio element.</p>
</audio>
</div>

JavaScript:

var $ = function (id) {
return document.getElementById(id);
}

var sound1_click = function() {
//starts playing
$("sound1").play ();
//pause playing
$("sound2").pause();
}

var sound2_click = function() {
//starts playing
$("sound2").play ();
//pause playing
$("sound1").pause();
}

window.onload = function () {
$("sound1").onclick = sound1_click;
$("sound2").onclick = sound2_click;
}
Community
  • 1
  • 1
user5117220
  • 89
  • 3
  • 12

1 Answers1

0

I think the problem is you are listing to click event, when you should be listening to play event, also for some reason, window.onload does not work properly in jsfiddle, so replace 

window.onload = function () {
    $("sound1").onclick = sound1_click;
    $("sound2").onclick = sound2_click;
}

with 

$("sound1").onplay = sound1_click;
$("sound2").onplay = sound2_click;

fiddle demo

or you can simply generalize it by:

var audios = document.getElementsByTagName('audio');
for(var i=0; i<audios.length;i++)    audios[i].onplay = pauseAllAudios.bind(null, audios[i]);

function pauseAllAudios(audio){
    for(var i=0; i<audios.length;i++)
        if(audios[i]!=audio)    audios[i].pause();    
};

fiddle demo

mido
  • 24,198
  • 15
  • 92
  • 117
  • Just to confirm, I should include the window.onload in the js file.? – user5117220 Jul 15 '15 at 04:39
  • yes, I guess it is safer that way, but don't why it doesn't work in jsfiddle, probably because this whole bock of code is loaded within iframe. – mido Jul 15 '15 at 04:52
  • Could I also write it this way too? jsfiddle.net/RE006/8djstmvy/4 I don't understand why this one isn't working. – user5117220 Jul 15 '15 at 06:55
  • @user5117220 I am not sure as to why you are using `!`, but check my updated answer, it has generalized way of doing it. – mido Jul 15 '15 at 06:55
  • I was trying to find a way to generalize it, but ! was the wrong choice. Thank you for your help. – user5117220 Jul 15 '15 at 19:16
  • The codes works. Last question why do you put null in pauseAllAudios.bind(null, audios[i]);? – user5117220 Jul 17 '15 at 02:25
  • I am using `null` as the `this` object value within function ` pauseAllAudios` since I am not using the `this` object anywhere inside the function, the first parameter value could have been anything else, it wouldn't make a difference. – mido Jul 20 '15 at 10:06
  • Thank you for your help, I really appreciate it. – user5117220 Jul 20 '15 at 17:31