时间戳

首页 > 解决方案 > 调整游戏音乐的音量

javascript - 调整游戏音乐的音量

问题描述

我正在构建一个在背景中播放音乐的游戏，当你在游戏中前进时，音乐会变成不同的曲目。问题是某些音轨声音太大。有没有办法把它调到我想要的音量？

链接到源

游戏链接

我正在寻找一种解决方案，我不必更改整个代码以匹配声音的某些部分并手动调整它。

先感谢您。

标签： javascripthtmlaudiohtml5-audio

解决方案

从我的角度来看，您有两个选择；将游戏中所有音频文件的响度标准化为同一级别（均衡、压缩、受限等），或者，如果可用，您可以使用webaudio api构建限制器并将其连接到您的音频源。

选项 1：响度归一化

响度归一化是将音频的平均响度设置为一定水平，这意味着您的音频文件将对其响度水平进行调换，以使平均响度符合您的要求。简而言之，它会降低或增加音量以使声音达到您需要的水平。如果您将所有曲目的响度提高到一定水平，它们肯定会保持在一定的音量范围内。

它可以通过音频标准化软件完成，维基百科建议ReplayGain、Sound Check和EBU R128；但是，您可以通过谷歌搜索找到其他人。

选项 2：使用DynamicsCompressorNode的 Webaudio 限制器

如果您能够在代码上使用webaudio api，那么使用简单的限制器也是您的选择。当然，有一组不同类型的限制器，但我无意讨论它们的区别和好处。

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

我发现这个博客对 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>

推荐阅读