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

Question

我正在制作一款游戏，我想让玩家可以静音所有声音。

我将我的音频文件称为：

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');

当我调用音频时，这很好用，例如，像这样：

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

我找到了一个用按钮静音所有声音的功能

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

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

所以我必须将所有音频“分组”为var，称为audio。

但是如果我执行以下操作，整个事情就会中断（'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');
}

我的电话有什么变化？会不会是这样的：

audio.GAMEPLAY.play();

Answer 1

如果你想创建一个带有音频的对象：

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')
};

现在您可以像这样调用每个音频的play() 方法：

audio.GAMEPLAY.play();

要通过此对象对所有音频进行静音/取消静音：

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