As I work on syncing a scroll effect animation in a div with an audio file, I've encountered an issue. The synchronization works perfectly when I set the element.style.animation property to 'none' when the audio is paused. However, things get tricky when I try to pause the animation instead of pausing the audio. Upon multiple pause and play actions, the animation loses its sync with the audio and ends up being too advanced.
//Here's the code snippet for handling the audio and animation synchronization:
const pupHymn = document.querySelector(".pup-hymn");
const hymnLyrics = document.querySelector(".lyrics");
const init = () => {
pupHymn.volume = 0.3;
pupHymn.addEventListener('play', () => {
audioTime = pupHymn.currentTime;
playbackRate = pupHymn.playbackRate;
hymnLyrics.style.animation = `scroll-effect ${160/playbackRate}s ${(12-audioTime)/playbackRate}s forwards running`;
);
//Pausing the animation when the audio is paused
pupHymn.addEventListener('pause', () => {
hymnLyrics.style.animation = 'none';
});
//This part works fine:
pupHymn.addEventListener('pause', () => {
hymnLyrics.style.animation = 'none'; });
}
When I attempted to pause the animationPlayState instead of the animation, the synchronization wasn't proper especially during multiple pause and play cycles.
pupHymn.addEventListener('pause', () => {
hymnLyrics.style.animationPlayState = 'paused'; });
I even tried logging the animation property of the div while the audio was playing, but despite the delay still being positive, the animation had already started.