music box

 

Here is the code from my music box...insert anywhere in your layout with a html-widget.

The moving gif is a picture, the actual playlist is just the arrows with the heart:

<!-- Music Controls -->

<div id="yt-player-controls" style="text-align: center; font-family: monospace; font-size: 20px; margin-top: 10px;">  // size of the music box, since it's text

  <a href="javascript:void(0);" onclick="prevTrack()" id="prev" style="margin: 0 10px; color: black; text-decoration: none;"></a>

  <a href="javascript:void(0);" onclick="togglePlay()" id="playPause" style="margin: 0 10px; color: black; text-decoration: none;"></a>

  <a href="javascript:void(0);" onclick="nextTrack()" id="next" style="margin: 0 10px; color: black; text-decoration: none;"></a>

</div>

<!-- Hidden YouTube Player -->

<div id="yt-player" style="display: none;"></div>

<script>

  // Inject YouTube API script

  let tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";

  document.body.appendChild(tag);

  let player;

  let isPlaying = false;

  function onYouTubeIframeAPIReady() {

    player = new YT.Player('yt-player', {

      height: '0',

      width: '0',

      playerVars: {

        listType: 'playlist',

        list: 'INSERT PLAYLIST ID HERE', 

        autoplay: 1, // 1 means autoplay

        controls: 0

      },

      events: {

        'onReady': onPlayerReady

      }

    });

  }

  function onPlayerReady(event) {

    event.target.setVolume(50);

    event.target.playVideo();

    isPlaying = true;

    updateControls();

  }

  function togglePlay() {

    if (!player) return;

    if (isPlaying) {

      player.pauseVideo();

    } else {

      player.playVideo();

    }

    isPlaying = !isPlaying;

    updateControls();

  }

  function nextTrack() {

    if (player) player.nextVideo();

  }

  function prevTrack() {

    if (player) player.previousVideo();

  }

  function updateControls() {

    document.getElementById("prev").innerHTML = "◁";

    document.getElementById("playPause").innerHTML = isPlaying ? "♡" : "♫";

    document.getElementById("next").innerHTML = "▷";

  } //Change here the symbols of your music box if you want different symbols

</script>

You can find the ID of the youtube playlist in the link.

Example: 

I opened a random playlist now.

In this case the ID is after list= and is called RDzd4ONUviSQY

You can make your own playlist on YT and use the ID for it.