我正在将div滚动效果动画与音频同步，当音频暂停时，当我将element.style le.Animation属性设置为‘None’时，同步工作正常.问题是，当音频暂停时，我try 暂停动画.当我暂停并多次播放时，动画不再与音频同步(动画太高级了).
//This is the audio element
const pupHymn = document.querySelector(".pup-hymn");
//This is the container div of the lyrics
const hymnLyrics = document.querySelector(".lyrics");
const init = () => {
pupHymn.volume = 0.3;
//Sync when playing manually
pupHymn.addEventListener('play', () => {
audioTime = pupHymn.currentTime;
playbackRate = pupHymn.playbackRate;
hymnLyrics.style.animation = `scroll-effect ${160/playbackRate}s ${(12-audioTime)/playbackRate}s forwards running`;
);
pupHymn.addEventListener('pause', () => {
hymnLyrics.style.animation = 'none';
});
//This works fine.
pupHymn.addEventListener('pause', () => {
hymnLyrics.style.animation = 'none'; });
}
但当我暂停AnimationPlayState时，当我暂停并多次播放时，它不会正确同步.
pupHymn.addEventListener('pause', () => {
hymnLyrics.style.animationPlayState = 'paused'; });
我已经try 在播放音频时记录div的动画属性，尽管延迟仍然是正值，但动画已经开始.