JS / 使用 Youtube Iframe API製作動態歌詞

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

function onYouTubeIframeAPIReady() {
  var player = new YT.Player("player", {
    height: "390",
    width: "640",
    videoId: "oIoaIlPpIcA",
    events: {
      onReady: onPlayerReady,
      onStateChange: onPlayerStateChange
    }
  });
}

      var r;
      for (var i = 0; i < stList; i++) {
        if (i != stList - 1) {
          var st1 = convertLST($(".LyricsYomi").eq(i).attr("st"));     //取得li標籤內的st屬性值，透過convertLST()轉換成秒數.毫秒
          var st2 = convertLST($(".LyricsYomi").eq(i + 1).attr("st"));
        }else{
          var st3 = convertLST($(".LyricsYomi").eq(stList - 1).attr("st"));
        }
        
        //console.log("st1", st1);
        //console.log("st2", st2);
        if (mtime < st1) {
          r = -1;
          console.log(r);
          break;
        } else if (mtime >= st1 && mtime < st2) {
          r = i;
          console.log(r);
          break;
        }else if(mtime >= st3){
          r = -2;
          console.log(r);
          break;
        }
      }

if (r > -1) {
        var sn1 = $(".LyricsYomi").eq(r).html();
        var sn2 = $(".Translate_zh").eq(r).html();
        var sn =
          "<li lang='ja' class='li3'>" +
          sn1 +
          "</li><li class='li4'>" +
          sn2 +
          "</li>";
        $("#ly").html(sn);
        $(".LyricsYomi").css("color", "blue");
        $(".LyricsYomi").eq(r).css("color", "red");
        $(".Translate_zh").css("color", "gray");
        $(".Translate_zh").eq(r).css("color", "red");
      }else if (r == -1){
        //$("#ly").html("<li class='li4'>雪花 - 中島美嘉</li>");
      }
      else if(r == -2){
        $("#ly").html("<li class='li4'>雪花 - 中島美嘉</li>");
      }