Tracktitel dynamisch nachladen (Shoutcast) per AJAX TEIL 2

August 27th, 2009 · by Michi · Allgemein

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!

11 Responses to “Tracktitel dynamisch nachladen (Shoutcast) per AJAX TEIL 2”

Tessalon 21. August 2010 um 05:08

Hallöchen,
sehr schönes Script und das erste von schon mindestens 8 die ich ausprobiert habe was mir die Homepage nicht auseinander fetzt^^.

Ich hab nur ein Problem mit dem Internet Explorer 8 – Wenn ich auf eine andere Seite meiner Homepage möchte oder wenn ich nur aktualisiere dann zeigt IE8 mir ein Fehler an>

Fertig, es sind Fehler aufgetreten.
Deatils ergeben: Details zum Fehler auf der Webseite

Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; Creative AutoUpdate v1.40.01)
Zeitstempel: Sat, 21 Aug 2010 05:06:32 UTC

Meldung: ‘document.getElementById(…)’ ist Null oder kein Objekt
Zeile: 32
Zeichen: 14
Code: 0
URI: http://xxxx/js/stats.js

Bitte um dringende Hilfe
Damian 8. Januar 2011 um 20:01

Super, klappt wunderbar, vielen dank
fishtown 10. Juli 2011 um 13:10

Hi, super Script. Aber was muss ich tun, um
a) mehrere Informationen aus der radiostats.php abzufragen und
b) diese nicht gesamt in einem div, sondern einzeln in die Anzeige einzubauen?

Die radiostats.php habe ich schon eine ganze Zeit am laufen, aber doch etwas abgeändert. Und nun möchte ich das ganze ganz gern per Ajax laufen lassen. Zu sehen auf der angegebenen HP.

Bitte Hilfe
Fishtown
fishtown 10. Juli 2011 um 14:04

Hat sich erledigt. Habs hinbekommen. Hatte nur nen Denkfehler.
fishtown 17. Juli 2011 um 09:13

Eine Frage habe ich:
Bei einigen Usern wird die Anzeige nicht angezeigt. Scheinbar ist hierbei Google Chrome sowie wohl auch IExplorer betroffen.
Da bei mir alles korrekt angezeit wird, kann ich es nicht nachvollziehen.

Weiss jemand Rat?
Michael P. 18. Juli 2011 um 11:25

Ich vermute mal, das der JS-Code inkompatibel ist. Ich hatte bisher nie Probleme, evtl müsste man sich aber mal nach einem anderen Content Ajax Loader umgucken
fishtown 18. Juli 2011 um 13:44

Danke für die schnelle Antwort. Aber wie kann es sein, das es bei dem einen funktioniert und bei dem anderen nicht?

Was den anderen Content Ajax Loader angeht. Irgendeine Idee?

Grüße
fishtown
fishtown 19. Juli 2011 um 14:42

OK, habe noch was rausgefunden:
Die, die beim IExplorer den Cache nach dem schließen leeren, haben Probleme. Wer den Cache nicht löscht, da scheint es zu gehen.
Kan man mit dieser Erkenntnis das Problem Scriptseitig lösen?
Michael P. 20. Juli 2011 um 08:48

Hey,
das mit dem Cache-problem kann ich mir nicht erklären.

Eine Alternative wäre es das man auf jQuery setzt. Eine recht gute EInführung zum Thema Ajax gibt es hier http://api.jquery.com/ajaxStart/ Ist auch mit Beispielcode
fishtown 23. Juli 2011 um 07:50

Danke für die schnelle Antwort.
Ich habe auch noch was gefunden, und mich würde interessieren, ob das auch funktionieren würde:

http://www.tfonfara.de/ajax-seiteninhalt-laufend-aktualisieren-jquery.xhtml

Grüße
Fishtown
fishtown 1. August 2011 um 11:51

So, nur noch als ergänzende Info:
Wenn beim IExplorer die Einstellungen für den Cahe auf alles andere als “Niemals” sind, dann geht es.
Am besten jedoch mit “Automatisch”. Habe nun schon einige andere Lösungsvorschläge versucht, aber es scheint da wohl ein generelles Problem beim IExplorer mit Ajax und dem Cache zu geben.

Daher: Für Lösungsvorschläge bin ich dankbar.