JavaScript 异步音频调试

Question

在我的 JavaScript 音频播放器中，我遇到了播放和广告转换的异步问题。音频播放和广告过渡有时会出问题且时间过长。我需要帮助调试代码以提高性能并修复任何错误。具体来说，我需要音频播放器代码的异步方面的帮助，以确保歌曲和广告之间的平滑过渡。歌曲不断出现故障，似乎贯穿了整个广告列表。 如果有人可以使用 JavaScript 帮助重现我的部分代码，那就太好了，我真的很难过。

代码从歌曲列表中随机选择一首歌曲并在 HTML 音频播放器上播放。它还会更新 HTML 元素中的艺术家和歌曲信息以供显示。如果歌曲即将结束，它会触发广告播放，广告结束后，它会随机选择另一首歌曲播放。

这是一个简单的可视化过程伪代码：

WHILE program is running:
SELECT a random song from the song list
IF the song has been played recently:
SELECT another random song
ELSE:
ADD the song index to the previous songs list
IF the previous songs list has more than 10 entries:
REMOVE the oldest song index
UPDATE the artist and song information in the HTML elements
SET the audio player source to the URL of the selected song
PLAY the audio player

IF the remaining time of the current song is less than 4 seconds:
FADE OUT the audio player
SELECT a random ad from the ad list
SET the ad audio player source to the URL of the selected ad
PLAY the ad audio player
DISABLE the next song button
WHEN the ad audio player updates its time:
IF the remaining time of the ad is less than 4 seconds:
REMOVE the ad audio player event listener
SELECT a new random song to play
ENABLE the next song button
FADE IN the audio player

下面是JavaScript代码（出于隐私考虑，我已经删除了歌曲和广告变量的大部分内容）：

// Define the songs object with name, artist, and URL for each song
var songs = [{name: "Dance With Me Tonight", artist: "Olly Murs", url: "https://audio-ssl.itunes.apple.com/itunes-assets/AudioPreview115/v4/77/3a/61/773a6178-430b-4d9a-0550-931da48b80cc/mzaf_16249376016298618799.plus.aac.ep.m4a"}];
var ads = [
{url:"https://d3q5dm8x5y8bx0.cloudfront.net/marketing/assets/audio/heart/1%20themes/HEART-HEART%202015-Theme%2007-Basic%20ID.mp3"}];
const audio = document.getElementById('audio');
const adAudio = document.getElementById('adAudio');
const playButton = document.getElementById('play');
const pauseButton = document.getElementById('pause');
const nextButton = document.getElementById('next');
const artistElement = document.getElementById('artist');
const songElement = document.getElementById('song');
const appleMusicAudioLink = document.getElementById('appleMusicLink');

let previousSongs = [];
let currentSongIndex;
let remainingTime;

function playRandomSong() {
  let randomSongIndex;
  do {
    randomSongIndex = Math.floor(Math.random() * songs.length);
  } while (previousSongs.includes(randomSongIndex) || (previousSongs.length > 10 && randomSongIndex === currentSongIndex));

  previousSongs.push(randomSongIndex);
  if (previousSongs.length > 10) {
    previousSongs.shift();
  }

  currentSongIndex = randomSongIndex;

  const { artist, name, url } = songs[randomSongIndex];
  artistElement.textContent = artist;
  songElement.textContent = name;
  document.title = `${name} by ${artist}`;
  audio.src = url;

  appleMusicAudioLink.href = `https://music.apple.com/gb/search?term=${encodeURIComponent(name + ' ' + artist)}`;
}

function playAd() {
  fadeOut(audio, () => {
    artistElement.textContent = '--';
    songElement.textContent = '--';
    adAudio.src = ads[Math.floor(Math.random() * ads.length)].url;
    adAudio.play();
    document.title = 'Heart Radio - Ad';
    nextButton.disabled = true;

    adAudio.addEventListener('timeupdate', function onTimeUpdate() {
      const remainingAdTime = adAudio.duration - adAudio.currentTime;
      if (remainingAdTime < 4) {
        adAudio.removeEventListener('timeupdate', onTimeUpdate);
        playRandomSong();
        nextButton.disabled = false;
        fadeIn(audio);
      }
    });
  });
}

function fadeOut(audioElement, onEnd) {
  const interval = 250; // in milliseconds
  let volume = audioElement.volume;
  const fade = setInterval(() => {
    volume -= 0.1;
    if (volume <= 0) {
      clearInterval(fade);
      audioElement.volume = 0;
      audioElement.pause();
      onEnd?.();
    }
    audioElement.volume = volume;
  }, interval);
}

function fadeIn(audioElement) {
  const interval = 250; // in milliseconds
  let volume = 0.1;
  audioElement.play();
  const fade = setInterval(() => {
    volume += 0.1;
    if (volume >= 1) {
      clearInterval(fade);
    }
    audioElement.volume = volume;
  }, interval);
}

playButton.addEventListener('click', () => {
  if (!previousSongs.length) {
    playRandomSong();
  }
  audio.play();
  playButton.style.display = 'none';
  pauseButton.style.display = 'block';
});

pauseButton.addEventListener('click', () => {
  audio.pause();
  pauseButton.style.display = 'none';
  playButton.style.display = 'block';
});

nextButton.addEventListener('click', () => {
  playRandomSong();
  audio.play();
  playButton.style.display = 'none';
  pauseButton.style.display = 'block';
});

audio.addEventListener('timeupdate', () => {
  remainingTime = audio.duration - audio.currentTime;
  if (remainingTime < 4) {
    playAd();
  }
});