Radio stream player
Ein Radiostream Player einfach und simple erstellt
Der hier verwendete Code
<?php
$url = array (
"http://dg-wdr-http-dus-dtag-cdn.cast.addradio.de/wdr/1live/live/mp3/128/stream.mp3?ar-distributor=f0b9",
"http://dg-mdr-http-dus-dtag-cdn.cast.addradio.de/mdr/990801/0/mp3/high/stream.mp3?ar-distributor=f0b9",
"http://aach.stream.tb-group.fm/tb-high.aac?",
"http://hb.aacl.stream.tb-group.fm/",
"http://ct.aacl.stream.tb-group.fm/",
"http://relay02.t4e.dj/hard_low.mp3",
"//webdesign.weisshart.de/audios/the_magics_tuff.mp3" //letzte Zeile ohne schließendes Komma!
);
/* ################### und hier die angezeigten Titel ######################### */
$name = array (
"Eins Live [ Stream ]",
"Schlager [ Stream ]",
"Techno Base Fm [Stream]",
"Hardbase [ Stream ]",
"Core Time [ Stream ]",
"Techno for Ever [ Stream ]",
"Tuff - The Magics unplugged" //letzte Zeile ohne schließendes Komma!
);
/* ##################### ab hier nicht mehr editieren ############################## */
$aufruf ="";
$direktLink ="";
function isIOS($user_agent=NULL) {
if(!isset($user_agent)) {
$user_agent = isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : '';
}
return (strpos($user_agent, 'iPhone') !== FALSE || strpos($user_agent, 'iPad') !== FALSE || strpos($user_agent, 'iPod') !== FALSE );
}
/* den uebergebenen Titel abfragen */
if (isset($_REQUEST['titel'])) {
$_REQUEST['titel'] = htmlentities($_REQUEST['titel']);
if (!is_numeric($_REQUEST['titel']) || $_REQUEST['titel'] > count($url) ) {$titel = $url[0];}
$autoplay="autoplay"; /* kein Autoplay in iOS */
$neuer_titel=true;
for ($i = 1; $i <= count($url); $i++) {
if ($_REQUEST["titel"] == $i) {$titel = $url[$i-1];}
}
} else {
$titel = $url[0];
$autoplay = "";
}
/* die Linkliste generieren */
for ($i = 1; $i <= count($url); $i++) {
$aufruf .= '<li><a href="?titel='.$i.'"> '.$name[$i-1];
if ($titel == $url[$i-1]) {
$aufruf .= "<span class='star'> ✔︎</span>";
}
$aufruf .= "</a></li>\n";
$direktlink .= '<li><a style="color:#000" href="'.$url[$i-1].'"> '.$name[$i-1].'</a></li>';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<style>
html {font-family: Arial, sans-serif;}
#player {
border: 6px solid #666;
border-radius: .5em;
max-width: 24em;
background: #0e0c0b;
margin:auto;
}
#player audio {width: 99%; margin: 25px 0 0 0; border:1px solid transparent;} /* 25px fuer Android */
#player audio:focus, #player audio:hover {background:#bbb;} /* die Rahmenfarbe */
@media screen and (-webkit-min-device-pixel-ratio:0) { /*chrome only*/
audio { filter: invert(1);}
}
#player ul {margin:0;padding:0}
#player li {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
list-style-type:none;
/*padding:6px;*/
border-top: 2px solid #666;
/* width: 240px; */
}
#player li a {padding:6px;}
#player li a:focus, #player li a:hover {background:#ccc;color:#000;outline:0}
#player li, #player li a {color:white;text-decoration:none; font-size: .9rem;display:block;}
.star {font-size: 1.3rem; line-height: .1rem; /*vertical-align: -.5rem;*/}
.bem {
font-size: .8rem;
-webkit-text-size-adjust: none; /* was es alles gibt! */
}
h1, p, #gemafrei {text-align:center;}
/* Smartphones and iPad (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 1024px) {
#gemafrei:before {content:'iOS und Android mögen leider kein Autostart.'; display:block;}
#player li{border-top: 1px solid #888;}
}
</style>
<title>Radio für meine Gäste</title>
<!-- <script src="modernizr.custom.29132.js"></script> -->
<?php
if(isIOS()) {
echo '
<style>
#player {background: #e1e1e1 !important;border: 2px solid #aaa;}
li a {color:#000 !important;}
li {border-top: 1px solid #aaa !important}
audio {margin: 10px 0 5px 0;filter: invert(0);}
</style>';
}
?>
</head>
<body onload="Lautstaerke()">
<div id="ie_fallback"></div>
<div id="player">
<!-- erstaunlich: ohne <source> tag gehts auch mit VO auf iOS -->
<audio id="innerplayer" src="<?php echo $titel; ?>" controls <?php echo $autoplay; ?> ></audio>
<ul>
<?php echo $aufruf; ?>
</ul>
</div>
<script>
if (top.location == self.location) {
// Seite in einem Frame geladen
}
</script>
<!-- <p id="gemafrei" class="bem">Gemafreie Demo-mp3: <a href="http://www.MP3-GEMA-frei.de">MP3-GEMA-frei.de</a></p> -->
<?php
$neuer_titel = 0;
if (isset($_REQUEST['titel'])) {$neuer_titel=$_REQUEST['titel'];}
?>
<script>
/* Damit Screen Reader Ausgaben nicht uebertoent werden: */
function Lautstaerke() {
document.getElementById("innerplayer").volume=0.7;
/* Fokus auf Player setzen nach Anwahl */
var neu = <?php echo $neuer_titel; ?>;
if ( neu !== 0 ) {
// document.getElementById('innerplayer').focus(); // führt zu Springen des Fokus in iOS
}
}
</script>
<?php
/* ########### serielle Wiedergabe ######### */
if ($neuer_titel >= count($url)) {
$next = 1;
} elseif ($neuer_titel == 0) {
$next = 2;
} else {
$next = $neuer_titel +1;
}
echo '
<script>
document.getElementById("innerplayer").addEventListener("ended", function() {
window.location = "?titel='.$next.'";
return false;
});
</script>
';
?>
</body></html>';