s2c server and client

An efficient way to give listeners a smooth and fast updates.
Shows last ten played songs on every stream.
Supports multiple streams from one Shoutcast2 server in mp3 format.

Why?

Why not?
Why letting every client do numerous of ajax requests to a php-server or even worse to the radio server directly when we can collect analyze send it if there are any changes?

The difference is big. By default s2c check for changes every 5 seconds. That’s one connection per stream every 5 seconds. With websockets the server and client have one connection and transmission only on changes. S2c uses socket.io so we have a litle more communication (approximately every 20 seconds). But this is still over websocket where available so still only one connection. Doing the same with a php server would take the same one connection every 5 seconds between servers. AND. All clients have to ask the php server for changes at the same rate, 5 seconds. If we calculate that an average song is 4 minutes thats 48 connections per client.

How?

Using a node.js server we have some great advantages.

Nodejs is excellent in handling many small connections and with the plug-in socket.io we have a solution to communicate in real-time with all listeners.

S2c retrieves xml information from a shoutcast2 server when there are clients connected. This information is parsed to json so we have a way to handle it efficiently. If the information differs from the one retreived last time we send it to all connected clients. S2c sends all information every time so we can use less code on the client, it only have to show what it gets.

Installation

Easiest usage.

Environment

S2c needs a couple of basic things.

  • A shoutcast2 running and transmitting at-least one stream in mp3 format.
  • A webserver serving the basic html and javascript.
  • A node.js server To handle the information flow.

Server

Install s2c_server with the npm tool

npm install s2c_server -g

(-g means its installed globally)

Then make a local copy of the servercode used to send information to jwplayer plugin. Go to any suitable folder and

wget https://raw.github.com/DennisHalmstad/s2c/master/server/s2cToJw.js

Open s2cToJw.js in any suitable editor find row 32.

server.listen(1338);

Enter what port u want node.js to listen at.

On the next row

s2c.init('http://localhost', '8000', 'YourPasswordHere', 5000, false, false);

enter ur shoutcast settings. (adress, port and password). Save and close the file

Run the server

node s2cToJw

Done

Client

The s2c contains a jwplayer plugin. This has some dependencies. first u need the actual player. download it from longtailvideo.com The free and open-source version is enough. Upload it to a suitable folder. typicliy www/jwplayer/

Second we need jQuery. The provided example use

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

If u have a own copy it works asgood.

Third we ned the j2c plugin. it contains of two files. One js file and on css file. typicaly downloaded to www/js/ and www/css/.

Both are needed but if u use bootstrap from twitter u might want to remove the last part of the css since its built to be able to drop in to an Twitter bootstrap page without any extra work. Like so css without bootstrap parts

Now u can start putting Ur page together. Here is an example of a page with only a player in it. Example

As shown in the example the usage of the jwplayer plug-in is very simple

if (jQuery && jwplayer) {
    jwplayer("myPlayer").setup({
        width: '600',
        height: '460',
        file: "music/Pitx_-_Hidden_Blues.mp3",
        primary: "flash",
        plugins: {
            "js/s2c_client.js": {
                server: 'http://serveraddress',
                port: '1337'
            }}
    });
}
  • width: with of the player
  • height: height of the player
  • file: jw player needs a file to load on
  • primary: Flash or html5, se note below
  • "js/s2c_client.js" path to and name of client plug-in file.
  • server address to node.js server
  • port port node.js is listening to

Make ur changes to server-address and port. Then u should be ready to go. Good luck.

Done

Disclaimer

I’m not associated with any of the companies, software or libraries named. All of them are copyrighted by their owners. Please visit respectively and review their tou and license.

License

S2c and all parts of it including but not excluding other parts, server, client, plug-in for jwplayer and these pages are licensed under GPL-3.0. This means in short (revise full text for more information) that u can "commercially use this code", "modify", "distribute" and place "warranty" on it. But u cant "sub-license" or hold author "liable". U also have to "include original or link to original" software, "state changes" and "disclose Ur source". This license don’t extend or alter licenses for other peoples work.

<audio> vs flash.

My goal is to make it easy for the listeners to use the player. This is why i prefer flash. Since the html5 audio tag is dependent on the browser to suport our format we are limited to some browsers. As of today there is no format that is suported in all browsers. However if the browser has flash installed it suports mp3.

Since we are using a flash-player its recommended that streams has a sample-rate accepted by flash, more info on Wikipedia.