Display playlist info from my stream on my web site

[milosz]

I have a stream. It runs off a simple playlist. it's 3000 items long, and each item is minimum 30 minutes long, maximum 90 minutes, so it's a playlist that takes a long time to repeat- over two months.

I would like to put some code on my website that would display where in the playlist the currently streaming track is, what's coming next, and maybe even the next 10 playlist items. (My material is all public domain so there's no problem with letting folks know what's coming up next)

I know I can just show the HTML output of the DNAS which shows the next track, but I want something nicer than that- something that shows more.

Before I go about re-inventing a wheel that someone may have already created, I thought I'd ask - anyone know of such a thing?

Thanks

[NJK]

I take it you search the internet already for Now Playing Scripts?

[milosz]

I don't need a "now playing" - I have one of those already - I need a "next ten to be played"

Various searches for shoutcast scripts, stream scripts etc have not found any "upcoming tracks" scripts

Thanks

[NJK]

https://www.youtube.com/watch?v=ppzYGd0wi_c

https://www.youtube.com/watch?v=HtTG5Kf_mTA

https://github.com/AzuraCast/AzuraCast/issues/158

just 3 examples of what you might be needing.

[milosz]

Thanks. The database / PHP stuff would be useful if / when I do my own script. My playlist is not a database, just a flat file, but the approach could probably be made to work. I think there would be more work, too, because the script would have to get the "now playing" info from the DNAS.

The recently played / now playing / what's next info is already easily available from the DNAS' HTTP output which I could put in a frame or some such.

What I am looking for is something to show the next 10 upcoming tracks, and that doesn't seem to exist. Perhaps I'll have to do that myself.... but it was worth a shout out to see if someone had already done it, after my various searches didn't turn it up.

If I get it to work I'll post it.

[milosz]

...no luck so far...

[joshpratt]

Originally Posted by milosz

I have a stream. It runs off a simple playlist. it's 3000 items long, and each item is minimum 30 minutes long, maximum 90 minutes, so it's a playlist that takes a long time to repeat- over two months.

I would like to put some code on my website that would display where in the playlist the currently streaming track is, what's coming next, and maybe even the next 10 playlist items. (My material is all public domain so there's no problem with letting folks know what's coming up next)

I know I can just show the HTML showbox apk output of the DNAS which shows the next track, but I want something nicer than that- something that shows more.

Before I go about re-inventing a wheel that someone may have already created, I thought I'd ask - anyone know of such a thing?

Thanks

Did anyone fix this issue?

[milosz]

No one has offered any solutions; it is left up to me to code one. So far I haven't had the time required to tackle this.

[harrygeorge4158]

Free Shoutcast and Icecast Flash or HTML5 Player. Streak Player with the decision of an extraordinary skin. MP3 design just, Icecast servers utilize the/stream mount, alter ...

[milosz]

I don't understand that reply, sorry.

[neralex]

milosz, this is possible in DNASv2 but only with a source, which is supporting the SHOUTcast v2 protocol and this source must be able to provide this information. From all what I know - sc_trans (deprecated, unsupported anymore, still BETA) was the only one source-manger, which was able to do this.

http://wiki.winamp.com/wiki/SHOUTcas...nses#Nextsongs

[milosz]

Well, I am using sc_trans. How about that, I never saw this/nextsongs thing.

And I can embed the [http://server IP: port/nextsongs output in my website. HTML5 embed is maybe not the best way to use it, but it DOES work.

[neralex]

Parse the XML-data with PHP or use the JSONP callback with a jQuery/ajax request.

/nextsongs?sid=1&json=1

[milosz]

Thanks neralex. That IS the way forward.

I am running into CORS issues with this approach though, DNAS doesn't support CORS as far as I can tell, seems I will have to implement an apache reverse-proxy on the machine to get this to work.

Or maybe I am just confused.

[stereoscenic]

I'm a little late, but if you haven't gotten this solved yet, I used JSONP to get around the CORS issue

[milosz]

JSONP can get around CORS. I'm looking into this. Don't know yet how to implement. Looking at it.

**THANKS!!**

[stereoscenic]

Here's how I do it for now playing & listener count:

<script>
var np = {};
np.parse = function(r){

var t = r.streams[3].songtitle.split(" - ");
document.getElementById('trackartist').innerHTML = t[0];
document.getElementById('tracktitle').innerHTML = t[1];
document.getElementById('nolisteners').innerHTML = (r.streams[2].currentlisteners + r.streams[3].currentlisteners) + ' <div id=listeners-label>Listeners</div>';

}
np.jsonp = function(){
var s = document.createElement("script");
s.src="http://yourserver.com/statistics?json=1&callback=np.parse";
document.body.appendChild(s);
document.body.removeChild(s);
setTimeout( function(){ window.requestAnimationFrame( np.jsonp ) || np.jsonp(); }, 3e4 );
}
np.jsonp();
// setInterval(np.jsonp, 3e4);
</script>

Note: this checks the server every 30 seconds. I use "requestanimationframe" to pause the script when the browser has a different tab active. you could remove that whole line and use the basic "setInterval" method at the end there.

[milosz]

I will try something like that.

Stereoscenic, is your web server on the same machine as the stream server?

[stereoscenic]

No, it's a different server.

[milosz]

OK, so is mine.

I'm not much good at javascript or php. I can struggle through using an example that someone else provides and adapting it to my use. There are also a couple of guys who code for a living that sometimes provide me with adult supervision.

I'm going to give this a try before long, when I have some quiet time late at night.

Thanks

[stereoscenic]

Shoot me any questions you may have, happy to help.

[milosz]

Thanks! I'm sure I'll have some.

[milosz]

This works - putting this script and tags in the body of my web site shows the upcoming tracks

<script>
var np = {};
np.parse = function(r){

var titles = document.getElementById('titles');
var innerHtml = "";
for(var i = 0; i < r.length; i++){
innerHtml += "<div>" + r[i].title + "</div>"
}
titles.innerHTML=innerHtml;

}
np.jsonp = function(){
var s = document.createElement("script");
s.src="http://MYSTREAMADDRESS:PORTNUMBER/nextsongs?sid=1&json=1&callback=np.parse";
document.body.appendChild(s);
document.body.removeChild(s);
setTimeout( function(){ window.requestAnimationFrame( np.jsonp ) || np.jsonp(); }, 3e4 );
}
np.jsonp();
// setInterval(np.jsonp, 3e4);
</script>

<div align="center">
<div CLASS="para2" align="right"></div>
</div>
<p></p>
<div id="titles">title</div>


=====================================

Many thanks for pointing me to the syntax for &callback that's what was needed to get around the CORS thing

[stereoscenic]

awesome! glad you got it worked out. It seems like such a hacky way of doing things, but I don't know if there's anything better

[milosz]

The important thing is IT WORKS, and this method even updates the web page in real time more or less.

All based on the direction you provided, sir! MANY THANKS.

[stereoscenic]

Oh hey that reminds me, you can reduce the time between updates. In case you didn't know, the "3e4" is just another way of writing 30000 for milliseconds (because every character counts, lol)

[milosz]

There is an issue with getting a page with this code in it to display the results on browsers which now enforce greater security, you can work around this by telling the browser in it's settings that the specific page should be allowed.

I know this is old stuff, sc_trans is old, unsupported and not the greatest to begin with - but in many cases sc_trans DOES WORK and is super easy to implement. So easy to implement on things like Ubuntu 14.04 with a simple playlist type stream.

My listeners really like this "Upcoming tracks" feature.

[dimbslmh]

We are currently using AutoDJ, but it only displays 1 title on the /nextsongs page.

I am having trouble finding documentation about sc_trans and it's support of nextsongs.

How did you get to display more then 1 title?

[milosz]

If you call

http://<IP Address or URL>:<PORT NUMBER FOR SHOUTCAST - USUALLY 8000)/nextsongs?sid=<SID NUMBER OF THE STREAM TO SHOW UPCOMING TRACKS>

For example, to see the XML containing the next tracks for my stream: http://streams.audionoir.com:8000/nextsongs?sid=1



sc_trans will output XML containing the next 10 tracks in the playlist. Using javascript and
AJAX on your web page you must then parse this XML into a list you can display on the site.

CAVEAT: because this involves cross-origin resource sharing (CORS) Google Chrome will block the parsed output and it will not show up on your web site. The user can often invoke a workaround, but it's not elegant to ask your listeners to enable a workaround in order to see some feature on your stream's web site.

There's some more info about this here=>https://developer.chrome.com/docs/extensions/mv2/xhr/

[dimbslmh]

You can also request it as JSON directly by adding &json=true
See: http://streams.audionoir.com:8000/ne...id=1&json=true

Because we use Centova, we are experiencing this problem: https://centova.com/forums/index.php?topic=2152.0

Thanks milosz for the reply.

[slimmans]

Hi,

Your help is appreciated

I can't see the list of 10 next songs for my radio station:

code:
http://51.83.16.212:8080/nextsongs?sid=1

can see only One next:

code:
http://51.83.16.212:8080/nextsong

(I am using winamp 5.8 and Shoutcast DSP 2.3.5)
any ideas??

Thanks