Embed this station on your website
Want to let your visitors listen to SynthPop Radio directly from your site or blog? It’s fast, easy, and requires no technical experience. Just follow these simple steps:
1. Copy the Embed Code
Below, you’ll find the HTML code for our player. Click the “Copy Embed Code” button to copy it to your clipboard.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>SynthPop Radio - Stream Player</title><script src="https://cdn.tailwindcss.com"></script><style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');body{font-family:'Inter',sans-serif;background:transparent!important;min-height:100vh;color:white;display:flex;align-items:center;justify-content:center;margin:0;padding:10px}.solid-panel{background:transparent!important;border:none;backdrop-filter:none}.cc_recenttracks_list{font-size:.85rem}.cc_recenttracks_list table{width:100%;border-collapse:collapse}.cc_recenttracks_list td{padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.05)}.cc_recenttracks_title{color:#3b82f6;font-weight:600;display:block}.cc_recenttracks_artist{color:#93c5fd;font-size:.75rem;opacity:.8}.play-button,.action-icon,.recent-btn,.vote-btn{transition:all .2s ease-out}.play-button:hover{transform:scale(1.05);background-color:#4f46e5}.action-icon:hover{color:#60a5fa;transform:translateY(-1px)}.recent-btn:hover{background-color:#2563eb;transform:translateY(-1px);box-shadow:0 4px 12px rgba(59,130,246,.3)}.vote-btn:hover{transform:scale(1.1);filter:brightness(1.2)}.custom-scroll::-webkit-scrollbar{width:3px}.custom-scroll::-webkit-scrollbar-thumb{background:rgba(99,102,241,.3);border-radius:0}.mock-track-item{display:flex;flex-direction:column;padding:6px 12px;border-bottom:1px solid rgba(255,255,255,.05)}.viz-container{width:100%;height:2px;background:rgba(255,255,255,.05);position:relative;overflow:hidden}.viz-line{height:100%;width:0;background:linear-gradient(90deg,transparent,#6366f1,#93c5fd,#6366f1,transparent);position:absolute;left:50%;transform:translateX(-50%);transition:width .1s ease-out,opacity .3s ease;opacity:0}.viz-active .viz-line{opacity:1}</style></head><body><div id="playerContainer" class="w-full max-w-[800px] solid-panel overflow-hidden relative"><div class="absolute top-4 right-4 z-10 flex flex-col items-end gap-2"><button id="popoutBtn" class="flex items-center gap-2 text-blue-400 action-icon" title="Open in pop-up"><span class="text-[10px] font-bold tracking-wider uppercase">Pop-out</span><svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg></button><button id="playlistBtn" class="recent-btn px-3 py-1 bg-blue-600 text-[9px] font-bold uppercase tracking-wider rounded-sm shadow-md">Recently Played</button></div><div class="flex flex-col h-[130px] bg-transparent"><div class="flex-1 overflow-y-auto custom-scroll" id="tracksScrollArea"><div class="cc_recenttracks_list" data-username="victor14"><div id="loader" class="animate-pulse text-slate-500 text-[10px] text-center mt-12 font-bold tracking-widest uppercase">Establishing Uplink...</div></div></div></div><div id="visualizer" class="viz-container"><div class="viz-line" id="vizLine"></div></div><div class="pl-1 pr-3 py-3 flex items-center justify-between bg-transparent"><div class="flex items-center gap-4 flex-shrink-0"><button id="togglePlay" class="play-button flex-shrink-0 bg-indigo-600 w-12 h-12 rounded-sm flex items-center justify-center shadow-lg shadow-indigo-500/20"><svg id="playIcon" class="w-6 h-6 ml-1" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg><svg id="pauseIcon" class="w-6 h-6 hidden" fill="currentColor" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg></button><div class="flex flex-col justify-center min-w-0"><div class="flex items-center gap-3 leading-tight"><h1 class="text-lg font-black tracking-tight whitespace-nowrap bg-clip-text text-transparent bg-gradient-to-r from-white to-blue-300">SynthPop Radio</h1></div><p class="text-slate-400 text-[9px] uppercase tracking-[0.2em] font-bold leading-none mt-0.5">Digital Transmission 24/7</p><div class="flex items-center gap-2 mt-1" id="voteContainer"><span id="votePrompt" class="text-[9px] text-slate-500 uppercase font-bold tracking-wider">Do you like this song?</span><div id="voteButtons" class="flex items-center gap-4"><button onclick="castVote(true)" class="vote-btn text-emerald-500 hover:text-emerald-400" title="Thumbs Up"><svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg></button><button onclick="castVote(false)" class="vote-btn text-rose-500 hover:text-rose-400" title="Thumbs Down"><svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L8.83 23l6.59-6.59c.37-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg></button></div><span id="voteThanks" class="hidden text-[9px] font-bold text-blue-400 uppercase tracking-widest animate-pulse">Thank you for voting</span></div></div></div><div class="flex items-center gap-6 flex-shrink-0"><div class="hidden sm:flex items-center gap-3 w-32 md:w-40 mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg><input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="0.8" class="w-full h-1 bg-slate-700 rounded-none appearance-none cursor-pointer accent-indigo-500"></div></div></div></div><audio id="radioAudio" preload="none" src="https://cast3.asurahosting.com/proxy/victor14/stream"></audio><script src="https://cast3.asurahosting.com/system/recenttracks.js"></script><script>const audio=document.getElementById('radioAudio');const playBtn=document.getElementById('togglePlay');const playIcon=document.getElementById('playIcon');const pauseIcon=document.getElementById('pauseIcon');const volumeSlider=document.getElementById('volumeSlider');const vizContainer=document.getElementById('visualizer');const vizLine=document.getElementById('vizLine');const popoutBtn=document.getElementById('popoutBtn');const playlistBtn=document.getElementById('playlistBtn');const trackList=document.querySelector('.cc_recenttracks_list');let isPlaying=false;let animationId;function castVote(isUp){const prompt=document.getElementById('votePrompt');const voteButtons=document.getElementById('voteButtons');const thanksMsg=document.getElementById('voteThanks');prompt.classList.add('hidden');voteButtons.classList.add('hidden');thanksMsg.classList.remove('hidden');setTimeout(()=>{thanksMsg.classList.add('hidden');prompt.classList.remove('hidden');voteButtons.classList.remove('hidden');},4000)}setTimeout(()=>{if(trackList&&trackList.innerHTML.includes('Establishing Uplink')){trackList.innerHTML='<div class="mock-track-item"><span class="cc_recenttracks_title">Connecting to Broadcast...</span><span class="cc_recenttracks_artist">Please press play to start stream</span></div>';}},3000);function updateUI(){if(isPlaying){playIcon.classList.add('hidden');pauseIcon.classList.remove('hidden');vizContainer.classList.add('viz-active');startAnimation()}else{playIcon.classList.remove('hidden');pauseIcon.classList.add('hidden');vizContainer.classList.remove('viz-active');stopAnimation()}}playBtn.addEventListener('click',()=>{if(isPlaying){audio.pause();isPlaying=false;updateUI()}else{const currentSrc=audio.src;audio.src="";audio.src=currentSrc;audio.load();audio.play().then(()=>{isPlaying=true;updateUI()}).catch(err=>{console.log("Stream load error:",err);isPlaying=false;updateUI()})}});volumeSlider.addEventListener('input',e=>{audio.volume=e.target.value});function startAnimation(){function animate(){if(!isPlaying)return;const targetWidth=Math.floor(Math.random()*60)+40;vizLine.style.width=`${targetWidth}%`;animationId=setTimeout(()=>requestAnimationFrame(animate),150)}animate()}function stopAnimation(){clearTimeout(animationId);vizLine.style.width='0%'}playlistBtn.addEventListener('click',()=>{const width=450;const height=600;const left=(window.screen.width/2)-(width/2);const top=(window.screen.height/2)-(height/2);window.open('https://players.rcast.net/playlist/72908','Playlist',`width=${width},height=${height},left=${left},top=${top},menubar=no,status=no,location=no,toolbar=no`)});popoutBtn.addEventListener('click',()=>{const width=400;const height=480;if(isPlaying){audio.pause();isPlaying=false;updateUI()}const left=(window.screen.width/2)-(width/2);const top=(window.screen.height/2)-(height/2);window.open('https://players.rcast.net/fantasticsquare/72908','SynthPopPlayer',`width=${width},height=${height},left=${left},top=${top},menubar=no,status=no,location=no,toolbar=no`)});audio.onpause=()=>{isPlaying=false;updateUI()};</script></body></html>