Making audio mute while other audio is playing

Question

I have a client that would like background music to be playing while her students take a quiz. However, the quiz requires that certain audio files play through onclick effects. When a student clicks to play an audio file, my client would like the background music to mute, then resume playing once the onclick audio file is finished.

Is there any way to do this? Here is the code I'm using to fire the small, onclick audio effects:

var effect1 = document.createElement('audio');
effect1.setAttribute('src', 'audio.mp3');
$.get();
effect1.addEventListener("load", function() {
    effect1.play();
}, true);
$('.effect1').click(function() {
    effect1.play();
});

And here is my background music code:

<audio autoplay loop>
    <source src="background.mp3">
</audio>

Any help is appreciated. Thanks!

Lauren

Sorry I just noticed that you want to **mute** it, not stop or pause it, so that link might not be useful... how about this one? http://stackoverflow.com/a/10075999/3651800 — Matt Coubrough, Jun 23 '14 at 05:24

score 0 · Answer 1 · answered Jun 23 '14 at 05:23

add an id to your audio tag

<audio id="bgplayer">

and then use jQuery to pause it before playing the click

$('#playeffect').click(function() {
   $('#bgplayer').pause();
   $('#effect1').play();

to resume it, you will need to add a listener to get fired at the end event of the clip

   $('#effect1').on('ended', function() {
     $('#bgplayer').play();
   });

Making audio mute while other audio is playing

1 Answers1