javascript - Gamedesign "group"用于静音和取消静音的 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();
}

所以我必须将所有音频“分组”为一个名为 audio 的 var。

但是如果我执行以下操作，整个事情就会中断('Uncaught TypeError:无法读取未定义的属性'play''):

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