HTML5 <audio>播放淡入和淡出

Question

我想在淡入和淡出时段的随机位置开始和停止HTML5播放,以平滑聆听体验.

这有什么样的机制？使用setTimeout()手动提升音量？

Answer 1

jQuery方式......

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

编辑:其中$ audio是jQuery包装的音频元素,newVolume是0和1之间的双精度.

编辑:元素的有效媒体音量是音量,相对于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 swing动画的vanilla TypeScript(如果你想在JavaScript中运行它,则删除类型信息).免责声明,这是完全未经测试的:

export async function adjustVolume(
    element: HTMLMediaElement,
    newVolume: number,
    {
        duration = 1000,
        easing = swing,
        interval = 13,
    }: {
        duration?: number,
        easing?: typeof swing,
        interval?: number,
    } = {},
) {
    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<void>((resolve) => {
        const timer = setInterval(() => {
            element.volume = originalVolume + (
                easing(tick / ticks) * delta
            );
            if (++tick === ticks) {
                clearInterval(timer);
                resolve();
            }
        }, interval);
    });
}

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

Answer 2

老问题,但如果有人正在寻找一个香草JS方式来做到这一点,我只是为项目写了一些东西,并认为我在这里发布它,因为我的搜索解决方案是徒劳的.如果您已经在使用视频或音频元素,那么您很可能不需要使用jQuery来控制对象.

function getSoundAndFadeAudio (audiosnippetId) {

    var sound = document.getElementById(audiosnippetId);

    // Set the point in playback that fadeout begins. This is for a 2 second fade out.
    var fadePoint = sound.duration - 2; 

    var fadeAudio = setInterval(function () {

        // Only fade if past the fade out point or not at zero already
        if ((sound.currentTime >= fadePoint) && (sound.volume != 0.0)) {
            sound.volume -= 0.1;
        }
        // When volume at zero stop all the intervalling
        if (sound.volume === 0.0) {
            clearInterval(fadeAudio);
        }
    }, 200);

}

此版本不允许编辑淡出时间(设置为2秒),但您可以很容易地对其进行论证.为了充分发挥这一作用,还需要额外的逻辑来首先检查音量设置的内容,以便知道将其淡出的因素.在我们的例子中,我们已经将音量预设为1,并且浏览器音量控制不在用户手中,因为它是用于幻灯片放映的东西,因此不需要它.

要获取音频的特定部分,您需要检查可搜索的时间范围,并根据可用的内容随机设置currentTime.