0

I have a number of different audio elements in my page as part of a narrative site. Each audio element has an ID so it can be called in at certain points. There is never more than one of the sounds playing at any time. But what I need is a mute button for the page as well and I can't use an id as far as I know because I need them to unmute back to the last sound rather than unmute them all (if that makes sense). Is there an easy way to mute all the page audio and then unmute again without triggering all audio to play?

Below is my code but it doesn't work obviously and I'm not sure what the best way to do it would be:

html:

    <audio id="streetsound" preload="auto" autoplay loop>
    <source src="assets/audio/1street.mp3" type="audio/mpeg">
    </audio>

    <audio id="seasonsound" preload="auto" loop>
    <source src="assets/audio/2seasons.mp3" type="audio/mpeg">
    </audio>

    <audio id="snowsound" preload="auto" loop>
    <source src="assets/audio/3snow.mp3" type="audio/mpeg">
    </audio>


 <div id="soundicon" style="display: none;">
    <a href="#" id="muteaudio"><img src="assets/images/sound.png" alt="cup" style="border:0;"></a>
    </div>

Jquery:

$(function(){
    $('#muteaudio').click(function() {
       $('audio').pause("");

    });
});
Codeface
  • 29
  • 2
  • 7

2 Answers2

0

just try this. 

 $('#muteaudio').click(function() {
     $('audio').each(function() {
            $(this).pause();
        });
    });
Runny
  • 9
  • 3
0
$('#muteaudio').click(function () {
    $('audio').each(function () {
        $(this).pause();
    });
});

Should work - based off How to mute/unmute sound of an audio using javascript

Using .each() iterates through all the matching elements that are present, and .pause() obviously pauses the <audio> tags.

Community
  • 1
  • 1
ntzm
  • 4,663
  • 2
  • 31
  • 35