Gamedesign将html5音频元素“分组”以静音和取消静音

Question

I am making a game, and I want to give the player the possibility to mute all sounds.

I call my audiofiles as following:

var STARTSCREEN     = new Audio('sounds/soundtrack-idle-24s.wav');
var GAMEPLAY        = new Audio('sounds/soundtrack-active-24s.wav');
var FX_BREAK        = new Audio('sounds/effect-break.wav');
var FX_BUBBLE       = new Audio('sounds/effect-bubble.wav');
var FX_EXPLOSION    = new Audio('sounds/effect-explosion.wav');

This works fine when I call the audio, for example, like this:

function startButtonClickHandler(event){
    GAMEPLAY.play();
}

I found a function to mute all sound with a button

muteButton = document.getElementById('mute-button');

function muteButtonClickHandler(event) {
    audio.muted = !audio.muted;
    event.preventDefault();
}

So I have to get all the audio 'grouped' as a var called audio .

But if i do the following, the whole thing breaks ('Uncaught TypeError: Cannot read property 'play' of undefined'):

var audio = {
    STARTSCREEN     = new Audio('sounds/soundtrack-idle-24s.wav');
    GAMEPLAY        = new Audio('sounds/soundtrack-active-24s.wav');
    FX_BREAK        = new Audio('sounds/effect-break.wav');
    FX_BUBBLE       = new Audio('sounds/effect-bubble.wav');
    FX_EXPLOSION    = new Audio('sounds/effect-explosion.wav');
}

And how does my call change? Will it be something like:

audio.GAMEPLAY.play();

Answer 1

If you want to create an object with audios:

var audio = {
  STARTSCREEN : new Audio('sounds/soundtrack-idle-24s.wav'),
  GAMEPLAY    : new Audio('sounds/soundtrack-active-24s.wav'),
  FX_BREAK    : new Audio('sounds/effect-break.wav'),
  FX_BUBBLE   : new Audio('sounds/effect-bubble.wav'),
  FX_EXPLOSION: new Audio('sounds/effect-explosion.wav')
};

Now you can call play() method of each audio like this:

audio.GAMEPLAY.play();

To mute/unmute all audios iterate through this object:

function toggleMute() {
  for (var i in audio) {
    audio[i].muted = !audio[i].muted;
  }
}