script.js

const buttons=document.getElementsByClassName("play-radio"),audios=document.getElementsByClassName("audio"),volumeControls=document.getElementsByClassName("volume-control");function pauseAllExcept(e){for(let l of audios)if(l!==e){l.pause();const e=Array.from(audios).indexOf(l);buttons[e].disabled||(buttons[e].innerHTML='<sl-icon id="icon" slot="prefix" name="play-circle-fill"></sl-icon> Play',volumeControls[e].style.display="none")}}for(let e=0;e<buttons.length;e++){const l=buttons[e],n=audios[e],t=volumeControls[e],o=n.getAttribute("src");let s=null;l.addEventListener("click",(()=>{n.paused?(l.innerHTML='<sl-spinner style="--indicator-color: var(--sl-color-neutral-0); --track-color: var(--sl-color-neutral-300);"></sl-spinner>',pauseAllExcept(n),o.endsWith(".m3u8")?Hls.isSupported()&&!s?(s=new Hls,s.loadSource(o),s.attachMedia(n)):n.canPlayType("application/vnd.apple.mpegurl")&&n.src!==o&&(n.src=o):n.src!==o&&(n.src=o),n.play().then((()=>{l.innerHTML='<sl-icon id="icon" slot="prefix" name="stop-circle-fill"></sl-icon> Stop',t.style.display="inline-block",n.volume=t.value/100})).catch((()=>{disableButton(l)})),t.addEventListener("input",(function(){n.volume=t.value/100}))):(n.pause(),l.innerHTML='<sl-icon id="icon" slot="prefix" name="play-circle-fill"></sl-icon> Play',t.style.display="none")})),n.onerror=function(){disableButton(l)}}function disableButton(e){e.innerHTML='<sl-icon slot="prefix" name="slash-circle"></sl-icon> Inactive',e.setAttribute("variant","default"),e.disabled=!0}