Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
pingplug opened this issue Nov 6, 2023 · 3 comments
Open

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

pingplug opened this issue Nov 6, 2023 · 3 comments

Comments

@pingplug
Copy link

pingplug commented Nov 6, 2023

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

@pingplug
Copy link
Author

pingplug commented Apr 9, 2024

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

@rocka
Copy link
Member

rocka commented Apr 10, 2024

很抱歉,这个音量条的设计给您带来了不好的体验。虽然在静音之后,将光标悬浮在应用底部的音量图标上,并向上滚动滚轮,可以提高音量,但此操作增减音量的步长为 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 中回复。

@pingplug
Copy link
Author

pingplug commented Apr 11, 2024

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

/**
 * @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));
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants