How to implement a logarithmic range slider for audio?

Question

Humans don't perceive sound linearly. We perceive sound on a logarithmic scale like so:

Linear Scale        0   1   2   3   4   5   6   7   8   9   10   (+1)
Logarithmic Scale   1   2   4   8  16  32  64  128 256 512 1024  (x2)

This creates a problem when trying to use an <input type="range" /> as an audio fader because the quiet sound takes up most of the scale and then gets loud super fast at the end.

Anyone know how to implement a logarithmic scale on a range input? I made this audio mixer but I was never able to figure out how to implement a logarithmic range slider. https://codesandbox.io/s/audio-mixer-linear-35cl7k?file=/src/components/ChannelStrip.js

had you have a look [here](https://stackoverflow.com/q/66669555/1447675)? — Nina Scholz, May 01 '22 at 08:40
seems you may want something like `Math.log(v + 51)/Math.log(63);` - where v is in the range -50 to 12 — Bravo, May 01 '22 at 09:01
@Bravo That converted it to between 0 and 1. I need it to be between -50 and 12. — Steve Barakat, May 01 '22 at 09:14
oh ... but it already IS between -50 and 12 ... audio tracks only accept 0 ... 1 - totally misunderstood the question, I thought you had an issue with the volume itself — Bravo, May 01 '22 at 23:47
@Bravo Your example helped. I was able to get it working by changing some of the values. Thanks! — Steve Barakat, May 02 '22 at 11:58

Steve Barakat · Answer 1 · 2022-05-02T19:44:55.980

This got it working.

function scale(val, f0, f1, t0, t1) {
  return ((val - f0) * (t1 - t0)) / (f1 - f0) + t0;
}

function changeVolume(e) {
  const value = parseInt(e.target.value, 10);
  const vol = Math.log(value + 101) / Math.log(113);
  const scaledVol = scale(vol, 0, 1, -100,12);
  channel.set({ volume: scaledVol });
  setVolume(Math.round(scaledVol));
}

<input
  type="range"
  min={-100}
  max={12}
  step={0.1}
  onChange={changeVolume}
/>

function scale(val, f0, f1, t0, t1) 
{
  return ((val - f0) * (t1 - t0)) / (f1 - f0) + t0;
}

document.querySelector("#slider").addEventListener("change", function(e)
{
  const value = parseInt(e.target.value, 10);
  const vol = Math.log(value + 101) / Math.log(113);
  const scaledVol = scale(vol, 0, 1, -100, 12);

  document.querySelector("#vol").innerText = vol;
  document.querySelector("#scaledVol").innerText = scaledVol;
});

<input id="slider" type="range" min="-100" max="12" step="0.1" />

<div>
    <div>Volume : <span id="vol"></span></div>
    <div>Scaled : <span id="scaledVol"></span></div>
</div>

Please add the code for `scale` to the snippet so that the rest of us can see how your answer worked. At present your answer only helps **you** and not the community. — Lee Taylor, May 02 '22 at 12:16
@LeeTaylor Thanks for pointing that out. I use that function in a few different files so I moved it to a utils file and forgot that I moved it. — Steve Barakat, May 02 '22 at 17:33
The idea was to add the scale function to your answer. I have now done this for you. Please delete your other answer as it serves no purpose. — Lee Taylor, May 02 '22 at 17:38

How to implement a logarithmic range slider for audio?

1 Answers1