Edit in JSFiddle

self.onSongleAPIReady =
  function(Songle) {
    var player =
      new Songle.Player({
        mediaElement: "#songle"
      });

    player.addPlugin(new Songle.Plugin.Beat());
    player.addPlugin(new Songle.Plugin.Chord());
    player.addPlugin(new Songle.Plugin.Chorus());
    player.useMedia("https://www.youtube.com/watch?v=zweVJrnE1uY");

    player.on("beatPlay",
      function(ev) {
        var beatElement =
          document.querySelector(".beat");

        var beatInfo1Element =
          document.querySelector(".beat .info1");

        var beatInfo2Element =
          document.querySelector(".beat .info2");

        beatElement.className = "beat beat-" + ev.data.beat.position;
        beatInfo1Element.textContent = ev.data.beat.position;
        beatInfo2Element.textContent = ev.data.beat.count;
      });

    player.on("chordEnter",
      function(ev) {
        var chordNameElement =
          document.querySelector(".chord .name");

        chordNameElement.textContent = ev.data.chord.name;
      });

    player.on("chorusSectionEnter",
      function(ev) {
        document.body.style.backgroundColor = "#000000";
        document.body.style.color = "#f3f5f6";
      });

    player.on("chorusSectionLeave",
      function(ev) {
        document.body.style.backgroundColor = "#f3f5f6";
        document.body.style.color = "#000000";
      });

    var playButton =
      document.querySelector("button.play");

    var stopButton =
      document.querySelector("button.stop");

    playButton.addEventListener("click",
      function() {
        player.play();
      });

    stopButton.addEventListener("click",
      function() {
        player.stop();
     });

    setInterval(
      function() {
        if(player.isPlaying) {
          var timeElement =
            document.querySelector(".time");

          var second = parseInt(player.position / 1000 % 60);
          var minute = parseInt(player.position / 1000 / 60);

          timeElement.textContent =
            minute + ":" + (second < 10 ? ("0" + second) : second);
        }
      }, 1000);
  }
<div class="media">
  <div>
    <span class="time">
      0:00
    </span>
    <button class="play">
      Play
    </button>
    <button class="stop">
      Stop
    </button>
  </div>
  <div id="songle">
  </div>
</div>
<div>
  <section class="beat">
    <span class="info1">
      -
    </span>
    <span>
      /
    </span>
    <span class="info2">
      -
    </span>
  </section>
  <section class="chord">
    <span class="name">
      -
    </span>
  </section>
</div>
<script src="https://api.songle.jp/v2/api.js"></script>
body {
  background-color: #f3f5f6;
  font-family: sans-serif;
  transition: 0.1s 0.1s all ease;
}

section {
  text-align: center;
}

.beat {
  font-size: 4em;
}

.beat .info1 {
  font-size: 2em;
}

.beat .info2 {
  font-size: 1em;
}

.media {
  position: fixed;
  left: 5px;
  bottom: 0px;
}

@keyframes beat-anime-1 {
   0% { transform: scale(1.20); }
  25% { transform: scale(0.85); }
  50% { transform: scale(1.00); }
}

@keyframes beat-anime-2 {
   0% { transform: scale(1.10); }
  25% { transform: scale(0.95); }
  50% { transform: scale(1.00); }
}

@keyframes beat-anime-3 {
   0% { transform: scale(1.10); }
  25% { transform: scale(0.95); }
  50% { transform: scale(1.00); }
}

@keyframes beat-anime-4 {
   0% { transform: scale(1.10); }
  25% { transform: scale(0.95); }
  50% { transform: scale(1.00); }
}

.beat-1 { animation: beat-anime-1 0.5s; }
.beat-2 { animation: beat-anime-2 0.5s; }
.beat-3 { animation: beat-anime-3 0.5s; }
.beat-4 { animation: beat-anime-4 0.5s; }