SouthBay Radio

[Itchdog]

Title: SouthBay Radio
Also a player for an Icecast radio station
SMF 2.1 | TP 3.0.3
Block type: HTML/Javascript
Author: Itchdog
No mods required. The player is made for a 200p wide block. There is no station selector but you can change the default radio url and logo to your broadcast information

See it in action here (left column).

Code Select Expand

<style>
#radioPlayer{
    width:194px;
    background:#1d1d1d;
    border-radius:16px;
    padding:15px;
    color:#fff;
    font-family:Arial,Helvetica,sans-serif;
    text-align:center;
    box-shadow:0 4px 20px rgba(0,0,0,.5);
}
.logo{
    width:90px;
    height:90px;
    border-radius:12px;
    object-fit:cover;
    display:block;
    margin:0 auto 10px;
}
.station{
    font-size:20px;
    font-weight:bold;
    margin-bottom:6px;
}
.live{
    display:inline-block;
    background:#d00000;
    color:#fff;
    font-size:11px;
    font-weight:bold;
    padding:4px 10px;
    border-radius:20px;
    animation:pulse 1.2s infinite;
}
@keyframes pulse{
    0%{opacity:1;}
    50%{opacity:.45;}
    100%{opacity:1;}
}
.songBox{
    margin:15px 0;
    background:#2a2a2a;
    border-radius:8px;
    padding:8px;
    overflow:hidden;
}
.songTitle{
    white-space:nowrap;
    display:inline-block;
    animation:scrollText 15s linear infinite;
}
@keyframes scrollText{
    0%{transform:translateX(100%);}
    100%{transform:translateX(-100%);}
}
/* BUTTON FIXED */
button{
    width:100%;
    background:#0084ff !important;
    color:#fff !important;
    border:none;
    border-radius:8px;
    padding:0px;
    font-size:15px;
    cursor:pointer;
    margin-bottom:10px;
    outline:none;
}
/* prevent white background after click */
button:focus,
button:active{
    background:#0084ff !important;
    color:#fff !important;
    outline:none;
    box-shadow:none;
}
/* hover state */
button:hover{
    background:#1694ff !important;
}
button::-moz-focus-inner{
    border:0;
}
.volumeLabel{
    font-size:12px;
    color:#ccc;
    margin-bottom:4px;
}
input[type=range]{
    width:100%;
}
.footer{
    margin-top:12px;
    font-size:11px;
    color:#888;
}
</style>
<div id="radioPlayer">
    <img src="http://acrossthemiles.net/pics/album_art.1726880335.jpg" class="logo">
    <div class="station">
        SouthBay Radio
    </div>
    <div class="live">
        ● LIVE
    </div>
    <div class="songBox">
        <div class="songTitle" id="songTitle">
            Loading current song...
        </div>
    </div>
    <button id="playButton">
        ▶ Play
    </button>
    <div class="volumeLabel">
        🔊 Volume
    </div>
    <input type="range"
           id="volume"
           min="0"
           max="1"
           step="0.01"
           value="0.25">
    <div class="footer">
        Streaming 24/7
    </div>
</div>
<audio id="radio">
    <source src="http://southbayradio.org:8115/live.mp3" type="audio/mpeg">
</audio>
<script>
const radio = document.getElementById("radio");
const playButton = document.getElementById("playButton");
const volume = document.getElementById("volume");
radio.volume = 0.25;
playButton.onclick = function(){
    if(radio.paused){
        radio.volume = 0.25;
        volume.value = 0.25;
        radio.play();
        playButton.innerHTML = "⏸ Pause";
    }else{
        radio.pause();
        playButton.innerHTML = "▶ Play";
    }
};
volume.oninput = function(){
    radio.volume = this.value;
};
async function loadSong(){
    try{
        const response = await fetch("nowplaying.php");
        const json = await response.json();
        let source = json.icestats.source;
        let title = Array.isArray(source)
            ? source[0].title
            : source.title;
        document.getElementById("songTitle").textContent =
            title || "Unknown Title";
    }catch(e){
        document.getElementById("songTitle").textContent =
        "Now Playing unavailable";
    }
}
loadSong();
setInterval(loadSong,15000);
</script>