点击上/下曲按钮无法切换已初始化的YouTube音频播放器的音频源，求解决方法

阿华AIGC实验室

2026-4-14

我在StackOverflow上找到一个基于YouTube链接的音频播放器，打算把它用到自己的网站上——毕竟我用的服务器免费版不支持存储音视频文件，这样就不用自己传音频文件了。这个播放器是Max Zheng开发的，包含CSS、JavaScript和HTML三部分代码。

我的需求是：在代码里存一组YouTube链接，让用户可以通过点击“上一曲”和“下一曲”按钮切换歌曲。

目前我已经写出了包含按钮、链接和播放器的代码（如下），按钮和链接的逻辑是正常的，但问题是播放器初始化之后，点击按钮无法切换音频源。有没有大佬能教教我怎么实现初始化后切换音频源的功能？

<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet">
  <script src="https://www.youtube.com/iframe_api"></script>

  <script>
    function onPlayerReady(event) {
      document.getElementById(ui.play).addEventListener('click', togglePlay);
      timeupdater = setInterval(initProgressBar, 100);
    }

    function onPlayerStateChange(event) {
      if (event.data == YT.PlayerState.ENDED) {
        document.getElementById(ui.play).classList.remove('pause');
        document.getElementById(ui.percentage).style.width = 0;
        document.getElementById(ui.currentTime).innerHTML = '00:00';
        player.seekTo(0, false); //change here the false to true if you want your audio to loop automatically
      }
    }

    let ui = {
      play: 'playAudio',
      audio: 'audio',
      percentage: 'percentage',
      seekObj: 'seekObj',
      currentTime: 'currentTime'
    };

    function togglePlay() {
      if (player.getPlayerState() === 1) {
        player.pauseVideo();
        document.getElementById(ui.play).classList.remove('pause');
      } else {
        player.playVideo();
        document.getElementById(ui.play).classList.add('pause');
      }
    }

    function calculatePercentPlayed() {
      let percentage = (player.getCurrentTime() / player.getDuration()).toFixed(2) * 100;
      document.getElementById(ui.percentage).style.width = `${percentage}%`;
    }

    function calculateCurrentValue(currentTime) {
      const currentMinute = parseInt(currentTime / 60) % 60;
      const currentSecondsLong = currentTime % 60;
      const currentSeconds = currentSecondsLong.toFixed();
      const currentTimeFormatted = `${currentMinute < 10 ? `0${currentMinute}` : currentMinute}:${
          currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds
          }`;

      return currentTimeFormatted;
    }

    function initProgressBar() {
      const currentTime = calculateCurrentValue(player.getCurrentTime());
      document.getElementById(ui.currentTime).innerHTML = currentTime;
      document.getElementById(ui.seekObj).addEventListener('click', seek);

      function seek(e) {
        const percent = e.offsetX / this.offsetWidth;
        player.seekTo(percent * player.getDuration());
      }

      calculatePercentPlayed();
    }

    var a = "jLdAuGarfM0"; //infinita highway

    var b = "M7lc1UVf-VE";

    var c = "glbmprjG3zw"; //hai yorokonde

    var d = "p6NzVd3pGdE"; //instambul

    var e = "2rHRztFGOm8";

    let teste = "37nwLhIA1zs";

    let shitpost = "i6l8MFdTaPE";

    let techto = e;


    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        height: '360',
        width: '640',
        videoId: id_video,
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
    }
  </script>
</head>

<body>
  <!--Youtube-->
  <div id="player" style="display: none; visibility: hidden;"></div>

  <!--Player-->
  <p id="nome_musica"></p>

  <div class="audio-player">
    <div class="player-controls">
      <div id="radioIcon"></div>
      <button id="playAudio"></button>
      <div id="seekObjContainer">
        <div id="seekObj">
          <div id="percentage"></div>
        </div>
      </div>
      <p><small id="currentTime">00:00</small></p>
    </div>
  </div>
  <button id="tras" >Previous Song</button>
  <button id="frente" >Next Song</button>
  <button id="bug"> FUNCIONE DESGRAÇA</button>
  <p>Song number</p>
  <p id="x" > </p>
  <script>
    var xe = 1;
    //var id_video = "jLdAuGarfM0";
    //var id_video = a;
    var inicio = checkin(xe);

    document.getElementById("tras").onclick = function() {
      bottras()
    };
    document.getElementById("frente").onclick = function() {
      botfrente()
    };
    //document.getElementById("bug").onclick = function()  {onYouTubeIframeAPIReady()};  <----- NÃO

    function botfrente() {
      yg = xe + 1;
      if (yg >= 4) {
        var yg = 1;
        checkin(yg);
        return xe = yg;
      } else {
        checkin(yg);
        return xe = yg;
      }
      document.getElementById("x").innerHTML = xe;
    }

    function bottras() {
      yg = xe - 1;
      if (yg <= 0) {
        var yg = 3;
        checkin(yg);
        return xe = yg;
      } else {
        checkin(yg);
        return xe = yg;
      }
    }

    function checkin(z) {
      document.getElementById("x").innerHTML = z;
      if (z == 1) {
        document.getElementById("nome_musica").innerHTML = "Engenheiros do Hawaii - Infinita Highway (ao vivo)";
        //substitute the text above with the name of the song
        id_video = a;
        //substitute the variable with your song
      } else if (z == 2) {
        document.getElementById("nome_musica").innerHTML = "They Might Be Giants - Istambul(not Constantinople)";
        id_video = d;
      } else if (z == 3) {
        document.getElementById("nome_musica").innerHTML = "Kocchi no Kento - Hai Yorokonde";
        id_video = c;
      } else {
        document.getElementById("error").innerHTML = "error in the system"
      }
    }
  </script>
</body>

</html>

备注：内容来源于stack exchange，提问作者NGU Animações