我的 canvas 动画的静音按钮

Question

我在 canvas 动画中在动画序列中的指定时间播放了一个声音。

我为此使用的代码是：

var snd = new Audio("sounds/explosion.mp3");
snd.play();

声音完美。我想包括一个静音按钮，以一次性将页面上的所有声音静音，主要是出于可访问性原因。

我不确定如何解决这个问题，如有任何帮助，我们将不胜感激。

Answer 1

使用 JavaScript Audio 对象 muted 属性测试静音状态和设置静音的示例。

<button id="mute">mute</button>

<script>

var snd = new Audio("sounds/explosion.mp3");
snd.play();

document.getElementById('mute').addEventListener('click', function (evt) {
  if ( snd.muted ) {
    snd.muted = false
    evt.target.innerHTML = 'mute'
  }
  else {
    snd.muted = true
    evt.target.innerHTML = 'unmute'
  }
})
</script>

我的 canvas 动画的静音按钮

Mute button for my canvas animation

html

javascript

canvas

html5-audio

html5-canvas