CODEWITHSUNDEEP
javascripthtmlaudioyoutube
NGU Animações
NGU Animações

Reputation: 9

I'm having trouble changing the audio source of an audio player I found here on StackOverflow

So, I found an audio player here on StackOverflow that uses youtube links, and I wanted to use it on my website so I didn't need to put any audio files on it (the server that I use don't handle audio and video files in their free version). It was made by Max Zheng, the code can be found here: How to play only the audio of a Youtube video using HTML 5?; and is composed of a css code, a javascript code, and a html code.

The idea I had was to have a list of youtube links on the code, for the user to change the song by clicking on the "next" and "previous" buttons

Here is the code I have made so far, with the buttons, links and the audio player included:

<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>

The links are working, and the buttons are working as well, but they don't change the source of the song after being determined when the code starts working. Can someone please help me determine how do I change the audio source after the code starts?

Upvotes: 0

Views: 41

Answers (0)

Related Questions