调整游戏中的音乐音量

时间:2018-09-04 14:49:55

标签: javascript html audio html5-audio

我正在构建一个在后台播放音乐的游戏,随着您在游戏中的前进,音乐会更改为其他曲目。问题是某些轨道声音太大。无论如何,有没有将其调整到我想要的最大音量?

Link to Source

Link to Game

我正在寻找一种解决方案,无需更改整个代码即可匹配声音的某些部分并手动进行调整。

谢谢。

1 个答案:

答案 0 :(得分:0)

从我的角度来看,您有两个选择;使游戏normalized的所有音频文件的响度达到相同的水平(均衡,压缩,受限等),或者,如果可用,您可以使用webaudio api来构建一个限制器并将其连接到您的音频源。

选项1:响度标准化

响度归一化是将音频的平均响度提高到一定水平,这意味着音频文件的响度级别将进行转换,以使平均响度符合您的要求。简而言之,它将减小或增大音量,以使声音达到所需的水平。如果将所有曲目的响度都提高到一定水平,它们一定会保持在一定的音量范围内。

这可以通过音频标准化软件来完成,维基百科建议ReplayGainSound CheckEBU R128;但是,您可以通过谷歌搜索找到其他人。

选项2:使用DynamicsCompressorNode

的Webaudio限制器

如果您可以在代码上使用webaudio api,那么也可以选择使用简单的limiter。当然,那里有一组不同类型的限制器,但我并不是要讨论每个限制器的区别和好处。

可以通过连接您在DynamicsCompressorNode上连接的音频源来完成。

我发现了这个blog which dig a little deeper into the limiter on webaudio,下面是我从博客中摘录的有关如何使用动态压缩器节点构建限制器的代码段。

var context = new AudioContext();
var audio = document.getElementById('audio');
var label = document.getElementById('maximize-db');
var reduction = document.getElementById('reduction');
var source = context.createMediaElementSource(audio);
var preGain = context.createGain();
var limiter = context.createDynamicsCompressor();
limiter.threshold.value = 0.0; // this is the pitfall, leave some headroom
limiter.knee.value = 0.0; // brute force
limiter.ratio.value = 20.0; // max compression
limiter.attack.value = 0.005; // 5ms attack
limiter.release.value = 0.050; // 50ms release
source.connect(preGain);
preGain.connect(limiter);
limiter.connect(context.destination);
var dbToGain = function(db) {
  return Math.exp(db * Math.log(10.0) / 20.0);
}
var maximize = (function(db) {
  preGain.gain.value = dbToGain(db);
  label.textContent = db;
  return arguments.callee;
})(0);
var showReduction = (function() {
  reduction.style.width = (dbToGain(limiter.reduction.value) * 288) + "px";
  window.requestAnimationFrame(arguments.callee);
})();
html, body {
  font-size: 12px;
  font-family: "Open Sans";
  background: white;
}

.controls {
  padding: 6px 16px;
  border-radius: 5px;
  background: #424242;
  color: #f0f0f0;
  display: inline-block;
  width: 288px;
  white-space: nowrap;
}

.controls input {
  width: 200px;
}

.controls span, .controls input {
    vertical-align: middle;
    padding: 0;
    margin: 0;
}

#reduction {
  margin-top: 4px;
  margin-bottom: 2px;
  width: 288px;
  height: 2px;
  background: green;
}

a {
  text-decoration: none;
  color: #666;
}

p {
  color: #CCC;
}

audio {
  width: 320px;
}
<h1>Web Audio HardLimiter</h1>
<div class="controls">
  <span>Maximize</span>
  <input type="range" value="0" step="1" min="0" max="12" oninput="maximize(this.value);">
  <span class="value" id="maximize-db">6</span> <span class="unit">dB</span>
  <div id="reduction"></div>
</div>
<div>
  <h3><a href="http://www.audiotool.com/track/never-ending_passion/" target="audiotool">Never-ending Passion</a> by The Three Pauls</h3>
  <audio id="audio" crossorigin controls>
    <source src="http://api.audiotool.com/track/never-ending_passion/play.ogg" type="audio/ogg">
    <source src="http://api.audiotool.com/track/never-ending_passion/play.mp3" type="audio/mpeg">
    Your browser does not support the audio tag.
  </audio>
</div>
<p>Does not work in Safari.</p>