Icecast Connected Devices Widget 📻

Number of connected listeners widget for 8K.NZ

Number of connected listeners widget for 8K.NZ

With all the mad knowledge and skills I’ve been learning lately I thought it’d be a good time to try writing my own thing. So I decided to have a go at writing my own widget to display how many devices are connected to the Icecast server for the online radio station I help run, 8K.NZ 📻

The live widget is here:
The code is up on Github here:

I’m going to attempt to describe what I did with the JavaScript. The Icecast server has a publicly accessible JSON object of live stats, I assigned this to a variable called endpoint. I accessed the object via a new DOM API called Fetch. This was then put in a function called blob which was then deconstucted into a constant called source. The value of the number of listeners is then assigned to the numbers variable.

Due to how the English language deals with singularity and pularity I needed to write an if statement to accommodate this. If the value of the variable number is 0, or 2 or greater, the first section of HTML is displayed inside the element with the id of noOfListeners. Otherwise if there is only 1 listener the second section of HTML is displayed.

This all gets wrapped in a getStreamStats function which is then called. The setTimeout method is then used in conjunction with a repeat method so that the getStreamStats function is run every 44 seconds. At 8K we like to have fun with numerology around the number 8 🤖

I learnt so much building what from the surface looks like a simple widget. Thanks to the follow people for their help and support:

Jeff Knaggs

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.