1 contributor
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="width=420px, user-scalable=no">
<link rel="shortcut icon" href="resource/radio.ico" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="functional.css">
<!-- <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> -->
<!-- <script src="http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js"></script> -->
<script src="jquery-1.11.2.min.js"></script>
<script src="flowplayer.min.js"></script>
<!-- Touch Screen Detection -->
<script>
function isTouchDevice(){
return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}
</script>
<script>
function strcmp(a, b) {
a = a.toString(), b = b.toString();
for (var i=0,n=Math.max(a.length, b.length); i<n && a.charAt(i) === b.charAt(i); ++i);
if (i === n) return 0;
return a.charAt(i) > b.charAt(i) ? -1 : 1;
}
flowplayer(function(api, root) {
api.on("load", function() {
console.info("flowplayer:load", api.engine.engineName);
document.getElementById("playing").innerHTML="true";
}).on("ready", function() {
var duration = api.video.duration;
//console.info("flowplayer:ready duration", duration);
//console.info("flowplayer:ready api.video.title", api.video.title);
//console.info("flowplayer:ready api.video.type", api.video.type);
console.info("flowplayer:ready api.video.url", api.video.url);
var clipSelector = document.getElementById("fp-playlist");
var clipFields = clipSelector.getElementsByTagName("ul");
for (i = 0; i < clipFields.length; i += 1) {
if( 0 == strcmp(api.video.url, clipFields[i].getElementsByTagName("a")[0].href) ) {
var title = clipFields[i].getElementsByTagName("a")[0].title;
var artist = clipFields[i].getElementsByTagName("a")[0].innerHTML;
console.info("title", title);
console.info("artist", artist);
document.getElementById("trackinfo").innerHTML=artist;
document.getElementById("image").style.display = "none";
onRefresh();
<?php
echo "if (Notification.permission === \"granted\") {\n";
//~ echo " var notification=new Notification(artist,{body: \"\", icon: \"resource/\" + title + \".jpg\" });\n";
//~ echo " setTimeout(function(){\n";
//~ echo " notification.close(); //closes the notification\n";
//~ echo " },3000);\n";
echo "} else if (Notification.permission !== 'denied') {\n";
echo " Notification.requestPermission(function (permission) {\n";
echo " // If the user accepts, let's create a notification\n";
echo " if (permission === \"granted\") {\n";
echo " var notification = new Notification(artist,{body: title, icon: \"resource/radio.ico\" });\n";
echo " setTimeout(function(){\n";
echo " notification.close(); //closes the notification\n";
echo " },3000);\n";
echo " }\n";
echo " });\n";
echo "}\n";
?>
}
}
}).on("pause", function() {
document.getElementById("playing").innerHTML="false";
}).on("resume", function() {
document.getElementById("playing").innerHTML="true";
});
});
</script>
<script type="text/javascript">
setInterval(function(){ onRefresh(); }, 20000);
</script>
<script>
function onRefresh()
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("list").innerHTML=xmlhttp.responseText;
}
}
var track_current_title=document.getElementById("trackinfo").innerHTML;
xmlhttp.open("GET","onrefresh.php?title="+track_current_title,true);
xmlhttp.send();
onUpdate();
}
function onUpdate()
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var is_playing=document.getElementById("playing").innerHTML;
console.log("onUpdate() : is_playing : ["+is_playing+"]");
if( is_playing != "false" ) {
var old_info = document.getElementById("current_track").innerHTML;
var new_info = xmlhttp.responseText;
//console.log("onUpdate() : new_info : ["+new_info+"]");
//Old Info
if( old_info != "" ) {
var old_artist =document.getElementById("current_track").getElementsByClassName("radio_artist")[0].innerHTML;
var old_title =document.getElementById("current_track").getElementsByClassName("radio_title")[0].innerHTML;
//console.log("onUpdate() : old_artist : ["+old_artist+"]");
//console.log("onUpdate() : old_title : ["+old_title+"]");
}
//New Info
var div = document.createElement("div");
div.innerHTML = xmlhttp.responseText;
var new_artist =div.getElementsByClassName("radio_artist")[0].innerHTML;
var new_title =div.getElementsByClassName("radio_title")[0].innerHTML;
var new_image_full =div.getElementsByTagName("img")[0].outerHTML;
var res = new_image_full.match("src=\"(.*)\" width=\"128\" height=\"128\">");
var new_image = res[1];
//console.log("onUpdate() : new_artist : ["+new_artist+"]");
//console.log("onUpdate() : new_title : ["+new_title+"]");
//console.log("onUpdate() : new_image : ["+new_image+"]");
if( 0 !== strcmp(old_info, new_info)) {
document.getElementById("current_track").innerHTML=new_info;
}
if( ( 0 !== strcmp(old_artist, new_artist) ) ||
( 0 !== strcmp(old_title, new_title) ) ) {
console.log("onUpdate() : change detected");
if (Notification.permission === "granted") {
var notification=new Notification(new_artist,{body: new_title, icon: new_image });
setTimeout(function(){
notification.close(); //closes the notification
},3000);
}
}
}
}
}
var track_current_title=document.getElementById("trackinfo").innerHTML;
xmlhttp.open("GET","onupdate.php?title="+track_current_title,true);
xmlhttp.send();
}
</script>
<title>Radio</title>
</head>
<body onload="onRefresh()">
<div id="header" class="box">
<div id="image" width="420px" style="display: none;"><img id="coverimage" src="resource/radio-big.png" width="200px" height="200px"></div>
<div id="current_track" style="display: block;"></div>
<div id="trackinfo" style="display: none;">France Info</div>
<div id="playing" style="display: none;">false</div>
</div>
<div id="content">
<!-- <div id="basic-playlist" class="flowplayer fixed-controls play-button no-toggle" data-embed="false" data-splash="true" data-loop="true" data-autoplay="true" data-ratio="0.5625" data-fullscreen="false">
<div class="fp-ratio" style="padding-top: 56.25%;"></div> -->
<div id="basic-playlist" class="flowplayer fixed-controls no-toggle astime" data-live="live" data-embed="false" data-splash="true" data-loop="true" data-autoplay="true" data-ratio="0.20" data-fullscreen="false">
<!-- <div id="basic-playlist" class="flowplayer fixed-controls no-toggle astime" data-live="false" data-embed="false" data-splash="true" data-loop="true" data-autoplay="false" data-ratio="0.20" data-fullscreen="false"> -->
<!-- <div id="basic-playlist" class="flowplayer fixed-controls no-toggle no-time" data-live="true" data-embed="false" data-splash="true" data-loop="true" data-autoplay="true" data-ratio="0.20" data-fullscreen="false"> -->
<div class="fp-ratio" style="padding-top: 20%;"></div>
<div class="fp-player">
<video type="audio/mpeg" src="http://direct.franceinfo.fr:80/live/franceinfo-midfi.mp3" class="fp-engine"></video>
<a id="id-prev" class="fp-prev" title="prev"><</a>
<a id="id-next" class="fp-next" title="next">></a>
<div id="fp-playlist" class="fp-playlist">
<?php
$file_contents_playlist=file_get_contents( "playlist.xml" );
$xml = simplexml_load_string($file_contents_playlist);
$json = json_encode($xml);
$array = json_decode($json,TRUE);
$CPTMAX=0;
foreach ( $array as $channel_list )
{
$cpt = 1;
foreach ( $channel_list as $channel )
{
$cptnice=$cpt;
if(10>$cpt) {
$cptnice="0$cpt";
}
echo "<ul><li><a id=\"id-item$cptnice\" class=\"item$cptnice\" type=\"audio/mpeg\" href=\"".$channel['mp3']."\" alt=\"".$channel['shortname']."\" title=\"".$channel['shortname']."\">".$channel['title']."</a></li></ul>\n";
$cpt=$cpt+1;
}
$CPTMAX=$cpt;
}
?>
</div>
<div id="download">
<!-- DO NOTHING HERE -->
</div>
<script type="text/javascript">
document.getElementById("id-prev").style.top = "-150px";
document.getElementById("id-next").style.top = "-150px";
/* Hack for Mobile */
if(isTouchDevice()===true) {
document.getElementById("ul").style.height = "38px";
document.getElementById("ul").style.fontSize = "24px";
<?php
for( $i = 1; $i < $CPTMAX; $i++ ) {
$cptnice=$i;
if(10>$i) {
$cptnice="0$i";
}
echo "\t\tdocument.getElementById(\"id-item$cptnice\").style.height = \"36px\"\n";
echo "\t\tdocument.getElementById(\"id-item$cptnice\").style.fontSize = \"24px\"\n";
}
?>
}
</script>
<div id="trackinfo_full"></div>
<script type="text/javascript">
/* Hack for Mobile */
if(isTouchDevice()===true) {
document.getElementById("trackinfo_full").style.width = "410px";
}
</script>
<div id="list"><img src="resource/loading.gif" width="100px" align="center"></div>
<!-- <div id="list">Loading Metadatas...</div> -->
</body>
</html>