:::: 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!


15 Comments

  • Tessalon |

    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

  • fishtown |

    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 |

    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. |

    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 |

    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 |

    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. |

    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 |

    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.

  • George |

    Problem is, Ubuntu sucks ass. Horrible defaults, aninynog network management, many missing tools… all the pain for a nicer desktop theme? I’ll pass.Debian is much more like it :-)BTW, while I’m on about things that suck, „Blogger.com“ is also quite possibly the second most aninynog platform around for the readers/repliers 🙂

  • http://www.jaclynk.com/ |

    geewhy,I'm going to say something that is rather politically incorrect about the supposed "insane poverty rate" of Texas: One man's social blight is another man's business opportunity. Who's more blighted: The TX with the high poverty rate that has a continually growing economy, or a Michigan who has the industrial welfare state everyone supposedly wants that is about to be surpassed in Per Capita income by…Alabama?

  • http://autoinsuranceabc.dynddns.us/auto_insurance_quotes_fort_myers_fl.xml |

    Heel leuk om te lezen Leuk dat je hem ingevuld hebt!En bunny’s! Ik heb echt het meest adorable konijnenlampje ever. Love it <3En ik wilde heel graag 2 kleine konijntjes hebben (nog steeds eigenlijk wel) en die wilde ik dan Tristan en Isolde noemen :nerd:Helaas komt het wel eens voor dat ik een dag of 2 weg ben dus dat vond ik een beetje sneu.Jouw bunny's zijn ook to die for, die oortjes en die neusjes! Awww

So, what do you think ?