Avatar of Wayne Barron
Wayne Barron
Flag for United States of America asked on

Cannot read property 'addEventListener' of undefined --- navigator.serviceWorker.register('worker.js')

I am trying to get a javascript to work, however. It is giving me some issues.
The demo of the working script from the author is here.
https://toohotradio.net/metadata/
I am using the same code he has on his demo page.
I downloaded the worker.js and have it stored in my JS folder.
So it looks like this in the code.
if ('serviceWorker' in navigator) {  var iceworker = navigator.serviceWorker.register('worker.js')
//I get this error in Google Chrome
Uncaught TypeError: Cannot read property 'addEventListener' of undefined
//For this line.
navigator.serviceWorker.addEventListener('message', event => {

Open in new window


Here is the script from the link above.

<audio preload="none" id="aud" controls src="https://toohotradio.net/metadata/icy/" type="audio/mpeg">
</audio>
<div></div>
<ul>
</ul>
<script>
if ('serviceWorker' in navigator) {
  var iceworker = navigator.serviceWorker.register('metadataworker.js')
    .then(function(reg) {
      console.log('Icecast service worker registered');
      addItem('Icecast service worker registered. Click play to start the stream.');
    }).catch(function(error) {
    console.warn('Error ' + error);
    addItem('Error ' + error);
  });
}
var delay = 8000;
navigator.serviceWorker.addEventListener('message', event => {
  if(event.origin != 'https://toohotradio.net'){
    return;
  }
  setTimeout(function(){
    document.querySelector('div').innerText = event.data.msg.substring(event.data.msg.indexOf("'") + 1,event.data.msg.lastIndexOf("'"));
  },delay);
  console.log(event.data.msg);
  addItem('Message from service worker ' + event.data.msg);
});
document.querySelector('audio').addEventListener('play', event => {
  performance.mark('play');
  addItem("Measuring buffering time...");
})
  document.querySelector('audio').addEventListener('playing', event => {
  performance.mark('playing');
  performance.measure('delay','play','playing');
  var measures = performance.getEntriesByName("delay");
  delay = measures[0].duration;
  addItem("Buffering took " + (delay/1000).toFixed(2) + " seconds");
  addItem("Setting metadata update delay to " + (delay/1000).toFixed(2) + " seconds");
})
  document.querySelector('audio').addEventListener('pause', event => {
  navigator.serviceWorker.controller.postMessage('message');
  document.querySelector('audio').src = document.querySelector('audio').src;
})
  function addItem(text) {
  var node = document.createElement("li");
  var textnode = document.createTextNode(text);
  node.appendChild(textnode);
  document.querySelector('ul').appendChild(node);
}
</script>

Open in new window


I've gone through his code and replaced every section with his domain, to point to mine.
This is the source link for the javascript function.
Source Code for Javascript
Can someone please assist me in getting this working?
Thank you.
Wayne
JavaScript

Avatar of undefined
Last Comment
Wayne Barron

8/22/2022 - Mon
David Johnson, CD

since he is using icecast why not go to the source https://icecast.org/
Wayne Barron

ASKER
I am using Icecast as well.
All my information is nearly identical to his.
I've posted the issue to GitHub about the issue, but he has not responded.

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

Open in new window

Into the
if ('serviceWorker' in navigator) { 

Open in new window

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

Open in new window

But nothing else is showing, no data for the music files.

Getting close to it.
ASKER CERTIFIED SOLUTION
Wayne Barron

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck