Get And Update Text Every Few Seconds From An Http Source To An Https Website

So, I have a radio station, my host provider does not have a SSL certificate and I have an website with a SSL certificate on where I want to display the current track name (mention

Solution 1:

Found an workaround for this. This could be helpful for most of people owning a radio station.

I registered my radio station on Internet-Radio. I am not sending you to register your radio station there. You may want to do this with any website you want but make sure that they display every data over HTTPS for this to work.

Most likely they have a proxy to get the data from unsecured HTTP to HTTPS and their entire website is secured. After your radio station is added, search for it on the top search bar and make sure you're only displaying your radio station from your search. This helps file_get_contents to get less HTML, thus loading faster. Get the minimum amount of keywords to display only your radio station, as I did: https://www.internet-radio.com/search/?radio=Riddim+Dubstep+-+Keep

Inspect element and find the tag with the track name on it. Right click on it and Copy -> Copy XPath on Chrome, not sure on other browsers. It actually took me some time to find that I can copy the XPath from Right Click -> Inspect...

<?php
libxml_use_internal_errors(false);
$html = file_get_contents('https://www.internet-radio.com/search/?radio=Riddim+Dubstep+-+Keep');
$doc = new DOMDocument;
$doc->loadHTML($html);
$xpath = new DOMXpath($doc);
$node = $xpath->query('/html/body/div[1]/div[1]/div[1]/table/tbody/tr/td[3]/b')->item(0);
echo$node->textContent;
?>

Modify $xpath->query with the XPath you just copyed and the URL with the URL from that page you got the XPath.

Save this file as

trackid.php

The following code you will add to your main page.

<scriptsrc="jquery.min.js"type="text/javascript"></script><scripttype="text/javascript">functiontrackid() {
$.get('trackid.php', function(data) {
$(".TrackTitle").text(data);
}); 
}
trackid()
setInterval(trackid, 5000);
</script><divclass="TrackTitle">Loading...</div>

The DIV TrackTitlewill be placed where you want the current song to be displayed. You may want to add some CSS to it to format the text to a more well-fitting in page.

Note: Don't forget to download the latest jquery.min.js from Google's API and update the link to it. I downloaded it on my webhost for faster loading but you can use the direct link to it with no problems.

Solution 2:

If your web hosting provider has the port you use for your Shoutcast station opened, then do what I will explain below. If not, check the other answer below.

Method 1

Create a file named trackid.php near index.php and put the following code:

<?php$server = "http://91.121.139.194:8157/stats?sid=1";
$srv_url = urlencode($server);
$sc_stats = simplexml_load_file($srv_url);
echo$sc_stats->SONGTITLE
?>

This parses data (song name) from unsecured HTTML to secured HTML by echoit to direct access from a secured connection. Don't forget to replace the IP and Port.

On index.php add this:

<scriptsrc="jquery.min.js"type="text/javascript"></script><scripttype="text/javascript">functiontrackid() {
$.get('trackid.php', function(data) {
$(".TrackTitle").text(data);
}); 
}
trackid()
setInterval(trackid, 5000);
</script><divclass="TrackTitle">Loading...</div>

Downside for this method is that it will create a background process on your server for every user because javascript requests output of a PHP file for every user.

Method 2

You can also set trackid.php to save the output (track name) inside a text file on FTP every 6 seconds:

<?php$server = "http://91.121.139.194:8157/stats?sid=1";
$LoopMaximum = 10;
$LoopInitial = 0;
Loop: {
    if ($GLOBALS["LoopInitial"] < $GLOBALS["LoopMaximum"]) {
        $srv_url = urlencode($GLOBALS["server"]);
        $sc_stats = simplexml_load_file($srv_url);
        $node = $sc_stats->SONGTITLE;
        $location = fopen("playing.txt","w+");
        fwrite ($location, $node);
        fclose($location);
        $GLOBALS["LoopInitial"]++;
        sleep(6);
        goto LoopFollow;} elseif ($GLOBALS["LoopInitial"] == $GLOBALS["LoopMaximum"]){
        exit();}
}
LoopFollow: {
    if ($GLOBALS["LoopInitial"] < $GLOBALS["LoopMaximum"]) {
        $srv_url = urlencode($GLOBALS["server"]);
        $sc_stats = simplexml_load_file($srv_url);
        $node = $sc_stats->SONGTITLE;
        $location = fopen("playing.txt","w+");
        fwrite ($location, $node);
        fclose($location);
        $GLOBALS["LoopInitial"]++;
        sleep(6);
        goto Loop;} elseif ($GLOBALS["LoopInitial"] == $GLOBALS["LoopMaximum"]){
        exit();}
}
?>

Add a CronJob for every minute:

php /home/user/public_html/trackid.php >/dev/null2>&1

Note: The path to PHP may differ for each webhost.

Now read the track from the text file every 5 seconds:

<scripttype="text/javascript">functiontrackid() {
var client = newXMLHttpRequest();
client.open('GET', '/playing.txt');
client.onreadystatechange = function() {
var trackName = client.responseText;
$(".TrackTitle").text(trackName);
}
client.send();
}
trackid()
</script>
setInterval(trackid, 5000);
<divclass="TrackTitle">Loading...</div>

There is no downside for this method but you need to have access to CronJobs and have at least a minimum of 5 background processes allowed. The track name will be as text on the DIV element. You can format it then with CSS.