electron-netease-cloud-music icon indicating copy to clipboard operation
electron-netease-cloud-music copied to clipboard

功能需求:建议使用对数音量条

Open pingplug opened this issue 9 months ago • 3 comments

对于音量较大的设备,现在只能在1%到5%范围内调节音量,用起来十分难受。 建议类似DeaDBeeF播放器,使用-50dB到0dB范围的对数音量条。

pingplug avatar Nov 06 '23 02:11 pingplug

在0音量的吸附且自动静音在这个使用场景下也是体验极差。 一不小心就调到0音量静音,此时无法拖动音量条。 在不知道怎么瞎操作下终于可以解除静音,结果一拖音量条还带吸附,等音量不是0的时候直接音量爆炸。

pingplug avatar Apr 09 '24 02:04 pingplug

很抱歉,这个音量条的设计给您带来了不好的体验。虽然在静音之后,将光标悬浮在应用底部的音量图标上,并向上滚动滚轮,可以提高音量,但此操作增减音量的步长为 5%,可能并不适用与您的场景。

在查阅了相关标准文档( https://html.spec.whatwg.org/multipage/media.html#dom-media-volume-dev )后,并没有找到如何按照 -50~0dB 的范围调整 HTMLMediaElement 的音量。标准中只规定了 volume 值 0.0 为静音, 1.0 为最大音量,并没有规定该音量值如何映射到响度或 dB:

Return volume, interpreted relative to the range 0.0 to 1.0, with 0.0 being silent, and 1.0 being the loudest setting, values in between increasing in loudness. The range need not be linear.

参考互联网上一篇博客文章( https://mechanical-consciousness.com/2018/09/29/how-to-make-a-good-volume-slider-zh.html ),可以实现以下插值方法:

/**
 * @param {number} pos slider position, integer range from 0 to 100
 * @returns {number} audio volume, floating point number range from 0.0 to 1.0
 */
function sliderPosToVolume(pos) {
    if (pos < 1) return 0;
    const minVolume = Math.log(0.005);
    const maxVolume = Math.log(1);
    return Math.exp((maxVolume - minVolume) / (100 - 1) * (pos - 1) + minVolume);
}

将音量最小值设定为 0.005,最大值设定为 1.0,并使用自然对数函数进行插值。使用 Wolfram Alpha 对该映射函数作图如下:

image

点击这里可以打开 Wolfram Alpha 作图页面。

如果您对该方案感到满意,我可以着手实现此方案。或者您有其他方案,也请在 Issue 中回复。

rocka avatar Apr 10 '24 07:04 rocka

其实按分贝的标准定义挺好的?

/**
 * @param {number} pos slider position, integer range from 0 to 100
 * @returns {number} audio volume, floating point number range from 0.0 to 1.0
 */
function sliderPosToVolume(pos) {
    if (pos < 1) return 0;
    return Math.pow(10, 0.025 * (pos - 100));
}

pingplug avatar Apr 11 '24 01:04 pingplug