networkState，readyState无法用于音频流

Question

I'm trying to check for an audio stream, to see if it is active. The server is on and streaming audio or it is off and not streaming. I found two methods, .networkState and .readyState, that work against an audio tag or an Audio() object. Things look okay when the stream is off and never been listened to (not in browser cache). I have both methods being executed every 4s to catch any change in the status of the stream because I want to continuously monitor for any change and update the web page.

The trouble is that I can't get either method to correctly update the status of the stream once it has changed, that is, from off to on or on to off. I have to refresh the page to get a real update. Then, after you've listened to the stream and it is cached, it always shows as 'on'.

Why don't either of these methods correctly detect the change of the stream? Is there a way to force a check against the actual object instead of the cached object?

(excuse my code - I quickly chunked this together and I am a newbie) (I tried more than shown below, but tried to make this post succinct.)

 <script> var myTimerVar = setInterval(myTimer, 4000); var myFunctionVar = setInterval(myFunction, 4000); // var aud = new Audio('http://myserver.com:8080/live.mp3'); function myTimer() { var acheck = document.getElementById("myAudio").networkState; if (acheck == 1) { document.getElementById("netstate").innerHTML = "ONLINE " + acheck; document.getElementById("netstate").style.backgroundColor = "MediumSeaGreen"; } else if (acheck == 3) { document.getElementById("netstate").innerHTML = "OFFLINE " + acheck; document.getElementById("netstate").style.backgroundColor = "yellow"; } } function myFunction() { var x = document.getElementById("myAudio").readyState; if (x == 0) { document.getElementById("readystate").innerHTML = "OFFLINE " + x; document.getElementById("readystate").style.backgroundColor = "yellow"; } else if (x == 4) { document.getElementById("readystate").innerHTML = "ONLINE " + x; document.getElementById("readystate").style.backgroundColor = "MediumSeaGreen"; } } </script> 

 <audio id="myAudio" controls> <source src="http://myserver.com:8080/live.mp3" type="audio/mpeg"> </audio> <!-- this is what does not update correctly on the page --> <p>StreamN0 is: <span id="netstate">OFFLINE</span></p> <p>StreamR0 is: <span id="readystate">OFFLINE</span></p> 

Answer 1

I have both methods being executed every 4s to catch any change in the status of the stream

Firstly, consider using the readystatechange event instead.

const readyStates = {
  0: 'HAVE_NOTHING',
  1: 'HAVE_METADATA',
  2: 'HAVE_CURRENT_DATA',
  3: 'HAVE_FUTURE_DATA',
  4: 'HAVE_ENOUGH_DATA'
}

document.querySelector('audio#myAudio').addEventListener('readystatechange', (e) => {
  document.querySelector('#readyState').innerText = readyStates[e.readyState];
});

The trouble is that I can't get either method to correctly update the status of the stream once it has changed, that is, from off to on or on to off.

What I think you're asking about is whether or not the stream is actually live... online or not. That's not what the readyState indicates. The browser doesn't actually know that you're playing a live stream. It assumes that the data it's cached is intended to be played. A readyState of HAVE_ENOUGH_DATA ( 4 ) just means that the browser thinks it's sufficiently buffered the media, and the rate of which it's buffered means it thinks it can continue to play without interruption .

The events you're probably looking for include:

• playing
• waiting
• ended
• emptied
• stalled