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

Answer 1

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>