YouTube Audio (With Timer)

Contador de tiempo al reproducir con YouTube Audio.

by Jasz Andre

HTML

<!-- Agregar aquí el ID del video -->
<div data-video="EcVO6mJrJrM"  
  data-autoplay="0"         
  data-loop="1"             
  id="youtube-audio">
</div>

<div id="youtube-title"></div>
<div id="youtube-timer"></div>
<div id="youtube-box"></div>

CSS

#youtube-title, #youtube-timer {
    color: #FFF;
    font-family: 'Arial', sans-serif;
    font-size: 13px;
    font-weight: 700;
    display: inline-block;
    padding: 4px 15px;
    border-radius: 3px;
    margin-top: 15px; /* Controla la altura de los elementos: título y timer */
    margin-left: 5px;
    /*display: none;*/ /* Descomentar para ocultar ambos elementos */
}

#youtube-title { 
    background-color: #444;
}

#youtube-timer { 
    background-color: #5963ad;
}

#youtube-timer:empty {
    display: none; /* Oculta el timer hasta que se inicia el video, no se toma en cuenta el buffering */
}

JavaScript

// 1. Carga asíncrona de la API IFrame de YouTube.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 2. Función que crea un <iframe> conteniendo el reproductor de YouTube.
// Adaptación y cambios: JaszAndre

function onYouTubeIframeAPIReady() {

  var box = document.getElementById("youtube-box");
  var ctrlq = document.getElementById("youtube-audio");

  var icon = document.createElement("img");
  icon.setAttribute("id", "youtube-icon");
  icon.style.cssText = "float:left;cursor:pointer;width:55px;";
  ctrlq.appendChild(icon);

  var div = document.createElement("div");
  div.setAttribute("id", "youtube-player");
  box.appendChild(div);

  var toggleButton = function(play) {
    var img = play ? "GddldI3.png" : "XrAWYmu.png";
    icon.setAttribute("src", "https://i.imgur.com/" + img);
  }

  ctrlq.onclick = function() {
    if (player.getPlayerState() === YT.PlayerState.PLAYING || player.getPlayerState() === YT.PlayerState.BUFFERING) {
      player.pauseVideo();
      toggleButton(false);
    } else {
      player.playVideo();
      toggleButton(true);
    }
  }

  var videoTimer;

  var 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': function(e) {
        player.setPlaybackQuality("small");
        toggleButton(player.getPlayerState() !== YT.PlayerState.CUED);
        document.getElementById("youtube-title").innerText = player.getVideoData().title;
      },
      'onStateChange': function(e) {
        if (e.data === YT.PlayerState.ENDED) {
          toggleButton(false);
        }					
        if (e.data == YT.PlayerState.PLAYING) {
          videoTimer = setInterval(function() {
            var...