:::: MENU ::::

Tracktitel dynamisch nachladen (Shoutcast) per AJAX TEIL 2

Teil 2 – Wie bau ich nun die Ausgabe aus Teil 1 in meine Website ein?

Dazu brauchen wir zunächst ein wenig JS Code ( stats.js )

// globale Instanz von XMLHttpRequest
var xmlHttp = false;

// XMLHttpRequest-Instanz erstellen
// ... für Internet Explorer
try {
    xmlHttpy  = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
    try {
        xmlHttpy  = new ActiveXObject("Microsoft.XMLHTTP");
    } catch(e) {
        xmlHttpy  = false;
    }
}
// ... für Mozilla, Opera und Safari
if (!xmlHttpy  && typeof XMLHttpRequest != 'undefined') {
    xmlHttpy = new XMLHttpRequest();
}

// aktuelle Daten laden
loadradioData();

// alle 30 Sekunden neue Daten / den Track holen
setInterval("loadradioData()",30000);

function loadradioData()
{
 if (xmlHttpy) {
     xmlHttpy.open('GET', 'radiostats.php', true);
     xmlHttpy.onreadystatechange = function () {
         if (xmlHttpy.readyState == 4) {
//Fügt die aus der PHP ausgelesenen Daten in in den <div id="radio_stats></div> ein
             document.getElementById("radio_stats").innerHTML = xmlHttpy.responseText;
         }
     };
     xmlHttpy.send(null);
 }
}

Diese binden wir in die Radio Website z.b. index.php ein:

<html>
<head>
<title>Shoutcast Radio Titel per JS ausgeben</title>
<script src="stats.js" type="text/javascript"><!--mce:0--></script>
</head>

Im 2en Schritt müssen wir im <body> noch unseren DIV einfügen in dem der Songtitel erscheinen soll:

<body>
<div id="radio_stats" style="color:red;" align="left">
</div> <!-- in dem DIV erscheint der Songtitel -->
</body>
</html>

Und das wars dann auch schon! Ihr habt eine dynamische Streamtitel Anzeige für euren Shoutcastserver und euer Webradio!

Downloaden könnt ihr das ganze  hier !

PS: Falls ihr ein Webradio betreibt und Hilfe benötigt oder einen Programmierer sucht sagt Bescheid!


So, what do you think ?