Link to home
Start Free TrialLog in
Avatar of Wayne Barron
Wayne BarronFlag 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
Avatar of David Johnson, CD
David Johnson, CD
Flag of Canada image

since he is using icecast why not go to the source https://icecast.org/
Avatar of 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
Avatar of Wayne Barron
Wayne Barron
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial