Mick Gordon: Difference between revisions
Appearance
No edit summary |
No edit summary |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<div class=" | <div class="radioBar"> | ||
<div | <button id="radioStart">▶ Radio</button> | ||
<span id="radioTitle">Not playing</span> | |||
<button id="radioReplay" disabled>↻ Replay</button> | |||
<button id="radioNext" disabled>⏭ Next</button> | |||
</div> | |||
<!-- Hidden YouTube player --> | |||
<div id="ytPlayer" class="ytHidden"></div> | |||
<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> | |||
Latest revision as of 01:15, 26 December 2025
<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>