waitForAudio = async () => {
  const audios = document.querySelectorAll("audio");

  console.log(`Found ${audios.length} audio elements to wait for`);

  await Promise.all(
    [...audios].map((audio, index) => {
      console.log(`Audio ${index} readyState: ${audio.readyState}, src: ${audio.src}`);

      if (audio.readyState === 4) {
        console.log(`Audio ${index} already loaded`);
        return Promise.resolve(true);
      }

      return Promise.race([
        new Promise((resolve) => {
          if (!isNaN(audio.duration)) {
            resolve(true);
          }
          audio.addEventListener("durationchange", () => {
            console.log(`Audio ${index} durationchange event fired`);
            resolve(true);
          });

          // Also listen for canplaythrough as a backup
          audio.addEventListener("canplaythrough", () => {
            console.log(`Audio ${index} canplaythrough event fired`);
            resolve(true);
          });
        }),
        // Add a timeout to prevent hanging indefinitely
        new Promise((resolve) =>
          setTimeout(() => {
            console.log(`Audio ${index} timeout reached, current readyState: ${audio.readyState}`);
            resolve(true);
          }, 5000),
        ),
      ]);
    }),
  );

  console.log("All audio elements are ready or timed out");
}
Wait for all audio on the page to be loaded