CODEWITHSUNDEEP
javascriptandroidjqueryaudio
thatOneGuy
thatOneGuy

Reputation: 10612

How to add a mute button to my app?

I have a few events in my app that make sounds.

For example,

What i want to have is a button which when clicked toggles between letting the sounds play and not letting them play.

I don't want to have a load of if statements on each sound, so is there a way around this ?

Here is how im calling my sounds at the moment 

//HTML
    <div id='mainRight'></div>

//JS
var mainRight = $('#mainRight');
    $(mainRight).width(windowDim.width/2).height(windowDim.height);
    $(mainRight).addClass('mainRight');

    var sounds = {

        coinHit : new Audio('./sound/coinCollect.wav'),
        playerClick : new Audio('./sound/playerClick.wav'),
        gameOver : new Audio('./sound/gameOver.wav'),
        backgroundMusic : new Audio('./sound/backgroundMusic.wav')

    }

    sounds.backgroundMusic.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();

    }, false);
    sounds.backgroundMusic.play();
    sounds.backgroundMusic.volume = 0.01;

    $('#mainRight').click(function()
    {
        sounds.playerClick.load();
        sounds.playerClick.play();
    }

Upvotes: 0

Views: 72

Answers (1)

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

Try this...

function toggleAudio() {
    for(var key in sounds) {
        sounds[key].muted = !sounds[key].muted;
    }
}

Just fire that every time you hit the mute button. It will toggle the muted state of each Audio object in the sounds object.

Upvotes: 1

Related Questions