31 May 2018
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: http://8k.nz/current-listeners/
The code is up on Github here: https://github.com/starlifter-nz/icecast-device-stats
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: