troubleshooting Question

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

Avatar of Wayne Barron
Wayne BarronFlag for United States of America asked on
JavaScript
3 Comments1 Solution6 ViewsLast Modified:
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 => {

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>

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
ASKER CERTIFIED SOLUTION
Wayne Barron
Author, Web Developer
Join our community to see this answer!
Unlock 1 Answer and 3 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros