Jump to content

Mick Gordon

From Doom Relics
 <button id="radioStart">▶ Radio</button>
 Not playing
 <button id="radioReplay" disabled>↻ Replay</button>
 <button id="radioNext" disabled>⏭ Next</button>

<style>

 .radioBar{
   display:flex; align-items:center; gap:10px;
   padding:10px 12px; border:1px solid rgba(255,120,0,.35);
   border-radius:10px; background:rgba(0,0,0,.45);
   color:#fff; max-width:720px;
 }
 #radioTitle{
   flex:1;
   overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
   opacity:.95;
 }
 .ytHidden{
   width:1px; height:1px; overflow:hidden;
   position:absolute; left:-9999px; top:-9999px;
 }

</style>

<script>

 const PLAYLIST_ID = "PLbskP5RAOv8iZNrpqyc12gQzhnOfmbpdO";
 // Load YouTube Iframe API
 (function(){
   const s = document.createElement("script");
   s.src = "https://www.youtube.com/iframe_api";
   document.head.appendChild(s);
 })();
 let player;
 function setTitle(text){ document.getElementById("radioTitle").textContent = text; }
 function enableControls(on){
   document.getElementById("radioReplay").disabled = !on;
   document.getElementById("radioNext").disabled = !on;
 }
 window.onYouTubeIframeAPIReady = function () {
   player = new YT.Player("ytPlayer", {
     height: "1",
     width: "1",
     playerVars: {
       // no visible UI
       controls: 0,
       modestbranding: 1,
       rel: 0,
       // playlist
       listType: "playlist",
       list: PLAYLIST_ID,
       // don't autoplay until user clicks Start
       autoplay: 0
     },
     events: {
       onReady: () => setTitle("Ready"),
       onStateChange: (e) => {
         // When playing or buffering, update title
         if (e.data === YT.PlayerState.PLAYING || e.data === YT.PlayerState.BUFFERING) {
           const data = player.getVideoData ? player.getVideoData() : null;
           if (data && data.title) setTitle(data.title);
           enableControls(true);
         }
       }
     }
   });
 };
 document.getElementById("radioStart").addEventListener("click", () => {
   if (!player) return;
   // This user click is what makes playback/auto-play more likely to work
   player.playVideo();
   // Update title shortly after starting (sometimes metadata lags)
   setTimeout(() => {
     const data = player.getVideoData ? player.getVideoData() : null;
     if (data && data.title) setTitle(data.title);
     enableControls(true);
   }, 600);
 });
 document.getElementById("radioNext").addEventListener("click", () => {
   if (!player) return;
   player.nextVideo();
   setTimeout(() => {
     const data = player.getVideoData ? player.getVideoData() : null;
     if (data && data.title) setTitle(data.title);
   }, 400);
 });
 document.getElementById("radioReplay").addEventListener("click", () => {
   if (!player) return;
   player.seekTo(0, true);
   player.playVideo();
 });

</script>