1

I'm building a game that has music playing on the background and as you advance through the game, the music changes to a different track. The problem is some of the tracks are too loud. Is there anyway to adjust it to as loud as I want it to be?

Link to Source

Link to Game

I'm looking for a solution that I wouldn't have to change my entire code to match certain parts of the sound and adjust it manually.

Thank you in advance.

lenilsondc
  • 9,590
  • 2
  • 25
  • 40
IGotManyQuestions
  • 29
  • 5

1 Answers1

0

From my point of view, you have two options; have the loudness of all audio files of your game normalized to the same level (equalized, compressed, limited, etc) or, if available, you can use webaudio api to build a limiter and connect it to your audio source.

Option 1: Loudness normalization

Loudness normalization is to have the average loudness of your audio to a certain level, it means your audio file will have its loudness level transposed to make the average loudness fit your requirement. In simple words, it will decrease or increase the volume to bring the sound to the level you require. If you bring all your tracks loudness to a certain level, they will sure stay in a certain range of volume.

It can be done through an audio normalization software, wikipedia suggests ReplayGain, Sound Check and EBU R128; but, you can find others by googling it.

Option 2: Webaudio Limiter Using DynamicsCompressorNode

If you are able to use webaudio api on your code, using a simple limiter is also an option for you. Of course, there is a set of different types of limiters out there but it is not my intent to discuss the differences and benefits of each one them.

It can be done by connecting you audio source connected on a DynamicsCompressorNode.

I found this blog which dig a little deeper into the limiter on webaudio and bellow is the snippet I took from the blog on how to build a limiter with a dynamics compressor node.

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>
lenilsondc
  • 9,590
  • 2
  • 25
  • 40