YouTube Music And Its Broken Volume Slider

Understanding the issue

The first time I tried it, I noticed the music was really loud. Initially, I assumed the issue was on my end, but after some digging, I found posts from other users online complaining that YouTube Music is indeed too loud.

Let’s rephrase the issue in the correct way:

“At its highest setting, the volume slider works as expected. However, when you try to lower it (because it’s too loud), the decrease in volume doesn’t feel proportional.”

For example, going from the muted setting (0%) to just a few steps to the right (5%) seems way louder than it should be.

What went wrong

The volume control of YouTube Music is implemented linearly.

volume = slider_position * some_constant

What the frontend developer implementing the volume controls probably didn’t know at the time was, that most human senses react logarithmically to change. To illustrate the issue, here’s an example to help you hear the difference for yourself.

As you can see, the exponential slider gives you way more control over the volume. One can also see why it's so hard to adjust a small volume on the linear slider.

How human senses react

Our ears react to sound waves, and the corresponding pressure that comes with the waves is interpreted as volume. The way our brain interprets the pressure is logarithmically.

This means that in order to double the volume, you would need to more than double the pressure. This is also why we measure volume in units of dB, or 'Decibel' - a logarithmic unit.

Other senses work in the same way. This is known as the Weber-Fechner law. It actually makes a lot of sense because in this way our senses can react to a wide range of inputs.

This allows us to see both very dim and very bright stars in the night sky.

How to solve the problem

The simplest fix is to change the volume control to the following:

volume = slider_position ** some_constant

where the ** denotes exponentiation. A good value for some_constant would be 3.

It’s not immediately obvious why we use slider ** constant rather than constant ** slider. Although we perceive loudness logarithmically, there are reasons why a polynomial approach is better for controlling the volume. Please refer to this source for more details.

Fixing the volume slider

Here’s a clever user script that fixes this volume control by overwriting the volume property getter and setter of HTMLMediaElement. A simplified version of the script can be seen below.

Object.defineProperty(HTMLMediaElement.prototype, 'volume', {
  get () {
    return get.call(this) ** (1 / EXPONENT);
  },
  set (volume) {
    set.call(this, volume ** EXPONENT);
  }
});

Volume normalization

Another missing core feature is proper volume normalization. This scales the raw audio of songs so they all seem to have the same loudness.

This is important because you don’t want the volume to change with every song as you listen through a playlist.

YouTube Music does in fact have some normalization. Some say it will only ever decrease volume, not increase it, so if the volume is too quiet, it won't be increased. Others say it only lowers the volume of songs louder than 0db.

Together, these factors make the volume control even more unintuitive.

Conclusion

The issue has been reported 6 years ago. 3 years ago users were still complaining about this issue. It has not been fixed as of today.

It seems crazy for a music platform where volume control is a key feature.

If we know how humans work, we can optimize our UI for it. Understanding how human senses work should be fundamental to frontend design, especially for something as essential as a volume slider.

Of course most of the time, you don't have to deal with such problems. If you're using the builtin audio element, the slider comes with the builtin UI element and works just right.

The issue only arises because YouTube Music uses an audio library for handling the volume.