Los humanos no perciben el sonido linealmente. Percibimos el sonido en una escala logarítmica así:
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) Esto crea un problema cuando se trata de usar un <input type="range" /> como atenuador de audio porque el sonido silencioso ocupa la mayor parte de la escala y luego se vuelve muy fuerte al final.
¿Alguien sabe cómo implementar una escala logarítmica en una entrada de rango? Hice este mezclador de audio, pero nunca pude descubrir cómo implementar un control deslizante de rango logarítmico. https://codesandbox.io/s/audio-mixer-linear-35cl7k?file=/src/components/ChannelStrip.js
Esto lo hizo funcionar.
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>