javascript - HTML5 <audio> 淡入淡出播放

Question

我想在具有淡入淡出周期的随机位置开始和停止 HTML5 播放，以平滑聆听体验。

为此存在什么样的机制？使用 setTimeout() 手动提高音量？

Answer 1

jQuery 方式...

$audio.animate({volume: newVolume}, 1000);

编辑:$audio 是一个 jQuery 包装的音频元素，newVolume 是 0 到 1 之间的 double 值。

编辑:元素的有效媒体音量是音量，相对于 0.0 到 1.0 的范围进行解释，0.0 表示静音，1.0 是最大声设置，介于两者之间的值会增加响度。该范围不必是线性的。 http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#effective-media-volume

编辑:人们正在发布 vanilla JavaScript 实现，所以我将发布一个保留 jQuery 摆动动画的 vanilla TypeScript(如果您想在 JavaScript 中运行它，只需删除类型信息)。 免责声明，这是完全未经测试的:

export async function adjustVolume(
    element: HTMLMediaElement,
    newVolume: number,
    {
        duration = 1000,
        easing = swing,
        interval = 13,
    }: {
        duration?: number,
        easing?: typeof swing,
        interval?: number,
    } = {},
): Promise<void> {
    const originalVolume = element.volume;
    const delta = newVolume - originalVolume;

    if (!delta || !duration || !easing || !interval) {
        element.volume = newVolume;
        return Promise.resolve();
    }

    const ticks = Math.floor(duration / interval);
    let tick = 1;

    return new Promise(resolve => {
        const timer = setInterval(() => {
            element.volume = originalVolume + (
                easing(tick / ticks) * delta
            );

            if (++tick === ticks + 1) {
                clearInterval(timer);
                resolve();
            }
        }, interval);
    });
}

export function swing(p: number) {
    return 0.5 - Math.cos(p * Math.PI) / 2;
}