javascript - 如何设置 HTML5 音频的响度？

Question

在我正在制作的 HTML5 游戏中，当事情发生碰撞时，我会发出“砰”的一声。不过，这有点不切实际。无论物体的速度如何，它们总是会发出相同的、相对响亮的“砰砰”声。我想做的是让声音的响度取决于速度，但我该怎么做呢？我只知道如何播放声音。

playSound = function(id)
{
    sounds[id].play();
}

sounds是一个充满new Audio("url")'s 的数组。

Answer 1

使用音频元素的音量属性。从W3开始：

元素的有效媒体音量是音量，相对于 0.0 到 1.0 的范围进行解释，其中 0.0 是静音，1.0 是最响亮的设置，介于两者之间的值会增加响度。该范围不必是线性的。最响亮的设置可能低于系统可能的最响亮设置；例如，用户可以设置最大音量。

前任：sounds[id].volume=.5;

Answer 2

您甚至可以玩弄增益并使音量播放大于 100%。您可以使用此功能来放大声音：

function amplifyMedia(mediaElem, multiplier) {
  var context = new (window.AudioContext || window.webkitAudioContext),
      result = {
        context: context,
        source: context.createMediaElementSource(mediaElem),
        gain: context.createGain(),
        media: mediaElem,
        amplify: function(multiplier) { result.gain.gain.value = multiplier; },
        getAmpLevel: function() { return result.gain.gain.value; }
      };
  result.source.connect(result.gain);
  result.gain.connect(context.destination);
  result.amplify(multiplier);
  return result;
}

您可以执行以下操作将初始放大设置为 100%：

var amp = amplifyMedia(sounds[id], 1);

然后，如果您需要声音两倍大，您可以执行以下操作：

amp.amplify(2);

如果你想减半，你可以这样做：

amp.amplify(0.5);

可在此处找到该函数的完整说明：http: //cwestblog.com/2017/08/17/html5-getting-more-volume-from-the-web-audio-api/

Answer 3

您可以通过设置来调节音量：

setVolume = function(id,vol) {
    sounds[id].volume = vol; // vol between 0 and 1
}

但是，请记住，在设置音量和它生效之间有一个小的延迟。您可能会听到声音以前一音量开始播放，然后跳到新音量。