Youtube html5 audio Radio player

index.html

<div style="display:flex;justify-content:center;align-items:center;">
  <div style="width:400px;height:300px;">
        <div data-video="uNN6Pj06Cj8" data-autoplay="1" data-loop="1" id="youtube-audio"></div>
        <div style="clear:both;margin:10px;text-align:center">
            <p>The audio player is created with the YouTube API.</p>
            <p>Read Tutorial: <a href="http://www.labnol.org/internet/youtube-audio-player/26740/">YouTube Audio Player</a></p>
        </div>
    </div>
</div>


<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>

script.js

  var player;

  function onYouTubeIframeAPIReady() {

    var ctrlq = document.getElementById("youtube-audio");
    ctrlq.innerHTML = '<img id="youtube-icon" src=""/><div id="youtube-player"></div>';
    ctrlq.style.cssText = 'width:150px;margin:2em auto;cursor:pointer;cursor:hand;display:none';
    ctrlq.onclick = toggleAudio;
    
    player = new YT.Player('youtube-player', {
      height: '0',
      width: '0',
      videoId: ctrlq.dataset.video,
      playerVars: {
        autoplay: ctrlq.dataset.autoplay,
        loop: ctrlq.dataset.loop,
      },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function togglePlayButton(play) {
    document.getElementById("youtube-icon").src = play ? "https://i.imgur.com/IDzX9gL.png" : "https://i.imgur.com/quyUPXN.png";
  }

  function toggleAudio() {
    if (player.getPlayerState() == 1 || player.getPlayerState() == 3) {
      player.pauseVideo();
      togglePlayButton(false);
    } else {
      player.playVideo();
      togglePlayButton(true);
    }
  }

  function onPlayerReady(event) {
    //event.target.setVolume(100);
    player.setPlaybackQuality("small"); //highres, hd1080, hd720, large, medium, small
    document.getElementById("youtube-audio").style.display = "block";
    togglePlayButton(player.getPlayerState() !== 5);
  }

  function onPlayerStateChange(event) {
    if (event.data === 0) {
      togglePlayButton(false);
    }
  }

youtube-html5-audio-radio-player.markdown

Youtube html5 audio Radio player

A Pen by Gino on CodePen.

License.