/    Sign up×
Community /Pin to ProfileBookmark

networkState, readyState not working for audio stream

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.)

<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>

<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>

to post a comment
JavaScript

6 Comments(s)

Copy linkTweet thisAlerts:
@rootDec 07.2018 — You want to determine the play state, well that all starts at the server.

You issue an active page - meaning it has all the player tools and the URL of the stream, etc...

If you are offline, then you issue a static page with no controls or player.

PROBLEM SOLVED...
Copy linkTweet thisAlerts:
@justinhauthorDec 07.2018 — That doesn't solve the problem. The state of the stream could change at any time. It could go online, offline, or be buffering. (buffering is not so important to me, but it is a nice feature of the methods in the post)

So, the user browses to the media page and I issue an 'offline' page to the user because the stream is not available. Then the stream comes online. How will the user know?

This still doesn't explain why the above methods don't work or how to get them (or something suitable) to work.
Copy linkTweet thisAlerts:
@rootDec 07.2018 — @justinh#1598745 THAT IS WHY you have a suite of properties you can get and set....

You obviously have not looked hard enough in to the controls that are available to you.
Copy linkTweet thisAlerts:
@justinhauthorDec 09.2018 — I have looked into several things. If I knew the answers, or where to find them, I wouldn't have posted my query asking for help from the World Wide Web.

I now see why the forum was created. I apologize for not being smart enough.
Copy linkTweet thisAlerts:
@rootDec 10.2018 — Look up HTML5 Audio

You will get sites like MDN and w3Schools pop up, in there you will find all the information you need about probing and querying a stream, controlling it and other things you can do with a stream.
Copy linkTweet thisAlerts:
@Sobhana123Dec 11.2018 — hi. I can't understand in this topic please tell me any one.

<a href="https://www.certvalue.com/iso-9001-certification-in-mumbai/">ISO 9001 Certification in Mumbai</a>
×

Success!

Help @justinh spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...