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: http://8k.nz/current-listeners/
The code is up on Github here: https://github.com/starlifter-nz/icecast-device-stats
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:
Screenshot of working through the “Object and Arrays – Reference vs Copy” tutorial.
This tutorial worked through the differences between referring to a variable, array or object and making a copy that you can then manipulate without affecting the original. There were a couple key takeaways I found interesting with this exercise.
The first was that if you let one variable be assigned a value, then refer that variable to a new one and then reassign the first variable this doesn’t change the second.
Next I learnt three ways of copying an array. I think my favourite is using the spread syntax as follows:
const showHosts = ['Pinacolada Soundsystem', 'Fraserhead', 'Dave Branton', 'Dr Hitchcock'];
const eightKayMembers = [...showHosts];
KONAMI key sequence code screenshot
First up an empty array is created and your secret (or Konami) code is assigned to a constant. Then an event listener is added to the window to listen for any time a key on the keyboard is released. Every keystoke is then pushed to the end of the “pressed” array.
The .splice method is then used on the array. We want to match the six characters of the secret code which means keeping the array at a length of six characters. To ensure that key stokes keep passing through the array and not just stop when the array is full at 6 positions we pass as an argument:
-secretCode.length - 1, pressed.length - secretCode.length
This is constantly compared as a string in a if statement to the “secretCode” constant. On a successful key sequence match a rainbow or unicorn is added to the window with the “cornify_add” function.
Phew! What a fun little program. I can’t wait to add this to one of my websites.