vteam #616 has been developing a custom radio player (for playing audio content) using AngularJS and SoundManager2 (as a sound API) for the client’s web based music portal. At the initial stage, vteams engineers were dealing with different types of media easily. Later on, the client required a unique module to create and play radio stations which contain songs, and also make them available for the purchase on his music portal.

The required module must fulfill the following objectives:

• Being able to track which song is being played currently on any radio station
• Display the information (Name, Artist, Genre, etc.) for the current song being played
• Process the information, provide Add to Cart button and other functionalities related to the song
  .

Dealing with live radio streams (broadcasted from IceCast Media Streaming Server) was different from playing static media files. While working on it, vteams engineer faced a problem; the name and other details of the current song being played at any radio station were not displayed. In order to allow a user to purchase/like a song being played on any radio station, the details (of the song) must be displayed so that he/she does not need to look for it on the site.

Solution

In order to avoid load on the server side as well as the client side, a solution which is much more efficient, compact and better than simple AJAX calls or long polling has been devised by vteam #616.

Using Socket.io, vteams engineers decided to use the sockets. The plan was to push the events from the server side whenever a song was changed on any radio station. Later on, make those events listen at the client side.

For this, a socket server was developed which was aware of the current song being played on different radio stations always. It (the socket server) repeatedly checked the status file of the IceCast Media Server and processed the information of radio stations accordingly. The server detected the song variations (on different radio stations) and then pushed the changed events with the new data to the users.

At loading time, the web based application was connected to the server as a client. Whenever a particular radio station is being played, it will start listening to certain events which are already set in the protocol. Since the client only listened to the events of a particular radio station (discarding others) and the events were processed and broadcasted from the socket server; the application’s load time was reduced.

Conclusion

The socket approach made this process super easy and light, though vteams have to run and manage the socket server as a separate Node application.