修改animationPlayState导致动画与音频不同步问题求助

我正在实现div滚动动画与音频的同步效果：当音频暂停时，把元素的style.animation设为'none'，同步完全正常；但换成用animationPlayState = 'paused'暂停动画后，多次暂停再播放，动画进度会超前，和音频彻底不同步。

代码示例 #

正常工作的代码 #

// 音频元素
const pupHymn = document.querySelector(".pup-hymn");
// 歌词容器div
const hymnLyrics = document.querySelector(".lyrics");

const init = () => {
    pupHymn.volume = 0.3;
    // 手动播放时同步动画
    pupHymn.addEventListener('play', () => {
        const audioTime = pupHymn.currentTime;
        const playbackRate = pupHymn.playbackRate;
        hymnLyrics.style.animation = `scroll-effect ${160/playbackRate}s ${(12-audioTime)/playbackRate}s forwards running`;
    });

    pupHymn.addEventListener('pause', () => {
        hymnLyrics.style.animation = 'none'; 
    });
}

出现问题的代码（多次暂停后同步失效） #

把暂停事件的处理改成以下代码后，同步问题出现：

pupHymn.addEventListener('pause', () => {
    hymnLyrics.style.animationPlayState = 'paused'; 
});

我排查时发现：在音频即将播放时打印div的animation属性，明明delay还是正值，但动画已经提前开始了。

问题原因 #

用animationPlayState暂停时，浏览器会保留动画的内部进度状态，但每次触发play事件时你重新设置了整个animation属性，相当于创建了一个新的动画实例，旧动画的暂停状态会干扰新动画的计时逻辑，导致你计算的delay失效，动画直接提前运行。

解决方案 #

如果想保留animationPlayState的暂停方式，需要在每次播放时基于当前音频进度精确计算动画的起始位置，而不是单纯重置动画：

const pupHymn = document.querySelector(".pup-hymn");
const hymnLyrics = document.querySelector(".lyrics");

const init = () => {
    pupHymn.volume = 0.3;

    pupHymn.addEventListener('play', () => {
        const playbackRate = pupHymn.playbackRate;
        const currentAudioTime = pupHymn.currentTime;
        // 计算动画应该已经完成的时长（基于音频播放进度）
        const animElapsed = (currentAudioTime - 12) / playbackRate;
        // 总动画时长按播放速率调整
        const totalAnimDuration = 160 / playbackRate;
        // 剩余需要播放的动画时长
        const remainingAnimDuration = totalAnimDuration - animElapsed;

        // 用负delay让动画直接跳到对应进度，同时设置剩余时长
        hymnLyrics.style.animation = `scroll-effect ${remainingAnimDuration}s ${-animElapsed}s forwards running`;
        hymnLyrics.style.animationPlayState = 'running';
    });

    pupHymn.addEventListener('pause', () => {
        hymnLyrics.style.animationPlayState = 'paused';
    });
}

逻辑说明 #

• 不再依赖初始的delay等待，而是通过**负的animation-delay**直接让动画跳转到与音频进度匹配的位置
• 每次播放时重新计算剩余动画时长，确保动画的总进度和音频完全对齐
• 暂停时仅用animationPlayState暂停动画，保留当前动画进度

内容的提问来源于stack exchange，提问作者Jason Buhain