如何实现音频的对数范围滑块？
如何实现音频的对数范围滑块？
提问于 2022-05-01 08:36:56
人类不会线性地感知声音。我们在对数尺度上感知声音，如下所示：
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)这造成了一个问题，当试图使用一个<input type="range" />作为一个音频推动者，因为安静的声音占据了大部分的比例，然后变得声音超快的结束。
有人知道如何在范围输入上实现对数刻度吗？我做了这个音频混频器，但我从来没有能够知道如何实现一个对数范围滑块。https://codesandbox.io/s/audio-mixer-linear-35cl7k?file=/src/components/ChannelStrip.js
回答 1
Stack Overflow用户
发布于 2022-05-02 11:57:05
这个起作用了。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72075197
复制相关文章
相似问题
腾讯云开发者
