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>';

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!