How to use

[carrzkiss]

I am very interested in your script and have downloaded the code but have no clue how it is used. Looking through the code, I changed all areas with your domain on it to mine, but still nothing.

You have this.

Simply register the service worker on the page your player is on, and it should start doing its thing.
navigator.serviceWorker.register('worker.min.js')

But, I have no clue on how to register it.

In your example, you have your domain without the PORT number at the end. However, in my case, I have the port number. So, mine is something like this. HTTP://192.168.2.203:8000/RadioOne

I would like to have this, and you can let me know whether your code will do it or not. I need to get some information from the stream to parse the data and compare it to the records in the database.

Any advice/information you can provide would be very grateful. Wayne

[brianshano]

Hey I've just been trying to work with this script too. What does your current app look like, have you registered a service worker?

I'm using next.js so I've set it up as a PWA using https://github.com/shadowwalker/next-pwa#readme With the service worker running I can add this metadata grabber code. But I'm currently getting CORS errors so cannot access the stream.

[carrzkiss]

I went another route for the time being. I am looking at the metadata from the XML file and grabbing it. Then having it do a refresh everything second to get the "what's playing now." Which it seems my script is getting the title faster than the song is being changed. Either way, it works well. I might change it to every 2 or 3 seconds instead of every second.

[brianshano]

Cool. How are you grabbing the xml? Are you able to do this on the client side of a web app?

[cryptiksouls]

Not sure who you spoke to but I never told anyone this wasn't being developed. It's unchanged because it still works.

You literally register the servicd worker using this line of code:

navigator.serviceWorker.register('worker.min.js');

As for CORS errors that will be because your stream is hosted on a different domain, you can try a preflight request but I've never really looked into it as I reverse proxy my streams so they all share the same domain so it's not a problem for me.

[carrzkiss]

Sorry for the misunderstanding. You are absolutely correct, I spoke with another person over another coding project, and I got his mixed up with yours. I will edit and remove what I wrote now.

As for registering the service worker. I am using the same code you have on your demo page. https://toohotradio.net/metadata/ I downloaded the worker.min.js and have it stored in my JS folder. So it looked like this in the code line.

if ('serviceWorker' in navigator) {
  var iceworker = navigator.serviceWorker.register('js/worker.min.js')

I get this error in Google Chrome Uncaught TypeError: Cannot read property 'addEventListener' of undefined For this line. navigator.serviceWorker.addEventListener('message', event => {

It does nothing when I run the page; it does not show what your page shows. Which is. Icecast service worker registered. Click play to start the stream.

brianshano I am using a jquery script to fetch the XML file and then a JQuery script to refresh a div every few seconds to get the current song playing. I know it may not be ideal, but I wanted to get something working.

[carrzkiss]

I have this topic on another board as well, and a user had me move the navigator.serviceWorker.addEventListener('message', event => { Into the if ('serviceWorker' in navigator) { I now get.

Measuring buffering time...
Buffering took 6.36 seconds.
Setting metadata update delay to 6.36 seconds.

But I don't get any metadata from the music files.

Any advice forward would be great.

[carrzkiss]

Figured it out. The URL needs to be HTTPS or localhost. Once I did that, it started working.

Just a suggestion. It might help out others to know what to use to register in the ReadMe.

All is good.

[cryptiksouls]

Glad you managed to get it working.

The code for registering the service worker is in the readme but maybe I could make it clearer for people who are new to using service workers. Thanks for your feedback, hope it does what you need it to do.

[carrzkiss]

The next thing is to get SSL working on the Linux server while also running ports 80 and 443 on our windows servers. I opened a question on the "let's encrypt" forum, so hopefully, someone can get back to me on it. As without SSL on the Icecast, I will not be able to use your script, and I need to get the album name to challenge our database.

Lots of fun.

[cryptiksouls]

My solution was to point a subdomain at an Nginx install on my linux server and then use Nginx as a reverse proxy to the icecast server. No CORS issues as everything is on the same domain and Nginx handles all the SSL stuff

[carrzkiss]

I never heard of the Nginx before, so a quick search, and I found out a lot in the first row. NGINX | High-Performance Load Balancer, Web Server

Question. I use load balancing in Windows to connect all my servers with a single IP address. This, in return, will load one of the servers each time a request is made.

Does the NGINX do the same thing with multiple Icecast servers? This would be my next venture once I got the Icecast server running as I need and want it to run.

[carrzkiss]

I watched a couple of videos on load balancing and cannot wait to do it. The one I am going to work on first is the SSL part. That is what I am researching now.

[carrzkiss]

I found a video that walks you through the entire process of setting up the server and installing SSL. https://www.youtube.com/watch?v=oykl1Ih9pMg&ab_channel=TraversyMedia

I will jump back on this later this week or next week, and if I have any questions regarding your script, I will post the questions here.

Take care, cryptiksouls, and have a great rest of the week,