Get and update text every few seconds from an HTTP

问题:

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 (mentioning again, only the track name, and not the artist) being played on the radio station. The track name can be found here: http://91.121.139.194:8157/currentsong?sid=1

The output of the above link displays: X - X - Y

X - Artist, Y - Track name. I don't want the first X to be displayed so it won't display the artist two times (one from artist metadata and one from track name metadata)

The problem is that I can't get text from HTTP to HTTPS. I tried Ajax and Javascript. Every one of them were blocked.

I know that displaying data from unsecured HTTP will pose a risk to the HTTPS I have, that's why I will hide the track name until the user clicks Play. Playing the audio also poses a risk since it is sent from HTTP....

My host provider also offers an API but the javascript that comes with it, also requests data from HTTP, being blocked...

Is there any workaround for this? I think it is pointless to put the Ajax and Javascript I used because both methods don't work. I also heard of using curl or file_get_contents but I really don't want to spend more hours as I did with the first 2 methods I tried just to find that it doesn't work. I need an advice to what to do.

Also, if there are better ways of getting the track name from a ShoutCast server, I am ok with that.

On a side note, I don't really know why my host provider does not use OpenSSL... it is free.

Edit: Another idea I am thinking is to get the track title metadata from the actual .mp3 streaming source. But that source it is from an unsecured HTTP, which again, I am not sure if it would work.

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

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function trackid() {
$.get('trackid.php', function(data) {
$(".TrackTitle").text(data);
}); 
}
trackid()
setInterval(trackid, 5000);
</script>
<div class="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.

回答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:

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function trackid() {
$.get('trackid.php', function(data) {
$(".TrackTitle").text(data);
}); 
}
trackid()
setInterval(trackid, 5000);
</script>
<div class="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;} else if ($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;} else if ($GLOBALS["LoopInitial"] == $GLOBALS["LoopMaximum"]){
        exit();}
}
?>

Add a CronJob for every minute:

php /home/user/public_html/trackid.php >/dev/null 2>&1

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

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

<script type="text/javascript">
function trackid() {
var client = new XMLHttpRequest();
client.open('GET', '/playing.txt');
client.onreadystatechange = function() {
var trackName = client.responseText;
$(".TrackTitle").text(trackName);
}
client.send();
}
trackid()
</script>
setInterval(trackid, 5000);
<div class="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.