Javascript 如何设置 HTML5 音频的响度?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10075909/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 23:44:30  来源:igfitidea点击:

How to set the loudness of HTML5 audio?

javascripthtmlhtml5-audioaudio

提问by corazza

In an HTML5 game I'm making, I play a "thud" sound when things collide. However, it is a bit unrealistic. No matter the velocity of the objects, they will always make the same, relatively loud "thud" sound. What I'd like to do is to have that sound's loudness depend on velocity, but how do I do that? I only know how to play a sound.

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

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

soundsis an array full of new Audio("url")'s.

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

回答by j08691

Use the audio element's volume property. From W3:

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

The element's effective media volume is volume, interpreted relative to the range 0.0 to 1.0, with 0.0 being silent, and 1.0 being the loudest setting, values in between increasing in loudness. The range need not be linear. The loudest setting may be lower than the system's loudest possible setting; for example the user could have set a maximum volume.

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

Ex: sounds[id].volume=.5;

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

回答by Chris West

You can even play around with the gain and make the volume play louder than 100%. You can use this function to amplify the sound:

您甚至可以调整增益并使音量播放的音量大于 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;
}

You could do something like this to set the initial amplification to 100%:

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

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

Then if you need the sound to be twice as loud you could do something like this:

然后,如果您需要将声音提高两倍,您可以执行以下操作:

amp.amplify(2);

If you want to half it you can do this:

如果你想减半,你可以这样做:

amp.amplify(0.5);

A full write up of the function is found here: http://cwestblog.com/2017/08/17/html5-getting-more-volume-from-the-web-audio-api/

该函数的完整描述可以在这里找到:http: //cwestblog.com/2017/08/17/html5-getting-more-volume-from-the-web-audio-api/

回答by Niet the Dark Absol

You can adjust the volume by setting:

您可以通过设置来调整音量:

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

However, bear in mind that there is a small delay between the volume being set, and it taking effect. You may hear the sound start to play at the previous volume, then jump to the new one.

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