如何设置 HTML5 音频的响度？答案

【问题标题】：How to set the loudness of HTML5 audio?如何设置 HTML5 音频的响度？
【发布时间】：2012-04-21 23:39:04
【问题描述】：

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

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

sounds 是一个包含new Audio("url") 的数组。

【问题讨论】：

可能重复stackoverflow.com/questions/1933969/…

标签： javascript html html5-audio audio

【解决方案1】：

使用音频元素的音量属性。来自W3：

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

例如：sounds[id].volume=.5;

【讨论】：

sounds[id].volume(vol) 给出“Uncaught TypeError: Property 'volume' of object # is not a function”

【解决方案2】：

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

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

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

【讨论】：

感谢您的回答和提示，+1！停顿一般有多大？我的声音长度大多

【解决方案3】：

您甚至可以随意调整增益，让音量播放到 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/

【讨论】：