Player-Vorschau

Erzeuge einen Webradio-Player mit echter Vorschau, 20 Designs, Titelanzeige und automatischer iTunes-Coveranzeige.

🔒 Hinweis: Die eingegebenen Daten werden nicht dauerhaft gespeichert. Sie werden nur für die direkte Vorschau, Code-Erzeugung oder technische Prüfung dieses Aufrufs verwendet.

Live-Vorschau

Der Titel kommt aus der Status-URL. Das Cover kommt automatisch von iTunes, wenn kein eigenes Cover eingetragen ist.

● LIVE128 kbps · MP3

Mein Webradio

Kopren - Airwave

Cover automatisch über iTunes gefunden

20%

Einbaupaket herunterladen

20 Designs

Empfohlen: Einbaupaket

Das Einbaupaket fragt Status-URL und iTunes-Cover serverseitig ab. Das ist stabiler als reines Browser-JavaScript und verhindert Probleme mit CORS/Mixed-Content.

<!-- ShoutCastMedia Player Widget -->
<iframe src="/scm-player/index.php" style="width:100%;max-width:760px;height:150px;border:0;overflow:hidden;border-radius:22px;" loading="lazy"></iframe>

Alternative: einzelner HTML-Code

Dieser Einzelcode enthält den aktuell gefundenen Titel und das aktuell gefundene Cover. Für automatische Aktualisierung bitte das Einbaupaket nutzen.

<!-- ShoutCastMedia Webradio Player | Backlink bitte sichtbar lassen -->
<div class="scm-radio-player" data-stream-url="">
  <div class="scm-cover"><img alt="Cover" src="https://is1-ssl.mzstatic.com/image/thumb/Music221/v4/11/9c/ce/119cce15-543f-7ffb-ac69-bf12978b3904/7300343394280.jpg/600x600bb.jpg"></div>
  <div class="scm-info">
    <div class="scm-top"><strong>● LIVE</strong><em>128 kbps · MP3</em></div>
    <div class="scm-radio">Mein Webradio</div>
    <div class="scm-title">Kopren - Airwave</div>
    <div class="scm-controls"><button class="scm-play" type="button">▶</button><button class="scm-mute" type="button">🔇</button><input class="scm-volume" type="range" min="0" max="100" value="20"><span>20%</span></div>
    <div class="scm-powered">Powered by <a href="https://shoutcastmedia.de" target="_blank" rel="noopener">ShoutCastMedia.de</a></div>
  </div><audio preload="none" src=""></audio>
</div>
<style>.scm-radio-player{--a:#ffc107;--b1:#070910;--b2:#151a24;max-width:760px;background:linear-gradient(135deg,var(--b1),var(--b2));border-radius:22px;padding:14px;display:flex;gap:14px;align-items:center;color:#fff;font-family:Arial,sans-serif}.scm-cover{width:92px;height:92px;border-radius:18px;overflow:hidden;flex:0 0 auto;background:var(--a)}.scm-cover img{width:100%;height:100%;object-fit:cover}.scm-info{flex:1;min-width:0}.scm-top{display:flex;justify-content:space-between;gap:10px}.scm-top strong{color:var(--a);font-size:12px}.scm-top em{font-size:11px;color:rgba(255,255,255,.6);font-style:normal}.scm-radio{font-size:22px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scm-title{font-size:14px;color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:3px 0 8px}.scm-controls{display:flex;align-items:center;gap:9px}.scm-controls button{border:0;border-radius:99px;background:var(--a);color:#000;font-weight:900;padding:7px 12px}.scm-controls input{accent-color:var(--a);max-width:130px}.scm-powered{font-size:11px;margin-top:7px;color:rgba(255,255,255,.55)}.scm-powered a{color:var(--a);font-weight:900;text-decoration:none}</style>
<script>(function(){document.querySelectorAll(".scm-radio-player").forEach(function(p){var a=p.querySelector("audio"),play=p.querySelector(".scm-play"),mute=p.querySelector(".scm-mute"),vol=p.querySelector(".scm-volume"),txt=p.querySelector(".scm-controls span");a.volume=.2;play.addEventListener("click",function(){if(a.paused){a.play().then(function(){play.textContent="⏸"}).catch(function(){alert("Stream konnte nicht gestartet werden.")})}else{a.pause();play.textContent="▶"}});mute.addEventListener("click",function(){a.muted=!a.muted;mute.textContent=a.muted?"🔊":"🔇"});vol.addEventListener("input",function(){a.volume=Number(vol.value)/100;txt.textContent=vol.value+"%"});});})();</script>