I’m building a music app where I need to play chord sounds synchronously with a background track. The problem is that the background sound starts playing about 70ms earlier than the chord sound for the first two playbacks, which is significant.

Here’s the core function that handles playing the sounds:

const nextChordPlayback = useRef(null);
  const nextBackgroundPlayback = useRef(null);

  useEffect(() => {
    let animationFrameId;
    currentPlayedChordIndexRef.current=0;
    nextBackgroundPlayback.current = Date.now();
    nextChordPlayback.current = nextBackgroundPlayback.current;
  
    const checkAndPlaySounds = () => {
      if (backgroundSoundStarted && !stopInterval.current) {
        const currentTime = Date.now();

        if (currentTime >= nextBackgroundPlayback.current) {
          nextBackgroundPlayback.current = currentTime + clipDuration;
          playBackgroundSounds();
          
          // Reset chord playback timing
          nextChordPlayback.current = currentTime;
          currentPlayedChordIndexRef.current = 0;
        }

        if (currentTime >= nextChordPlayback.current) {
          if (currentPlayedChordIndexRef.current !== null) {
            nextChordPlayback.current += chordDuration;
            playNextChord(currentPlayedChordIndexRef.current);
            currentPlayedChordIndexRef.current = (currentPlayedChordIndexRef.current + 1) % 4;
          }
        }

        animationFrameId = requestAnimationFrame(checkAndPlaySounds);
      }
    };
  
    if (backgroundSoundStarted && !stopInterval.current) {
      animationFrameId = requestAnimationFrame(checkAndPlaySounds);
    }
  
    return () => {
      if (animationFrameId) {
        cancelAnimationFrame(animationFrameId);
      }
    };
  }, [backgroundSoundStarted, stopInterval, currentPlayedChordIndexRef]);

The issue occurs only during the first two background sound playbacks. After that, the sounds play synchronously.

Why is there a delay in playing chord sounds only when the background sound is played for the first two times? How can I fix it so that it plays synchronously every time? Feel free to ask for any other information you need, like how am I loading or playing the sounds.