Detect when HTML5 audio stream breaks or pauses

Question

I am trying to stream a Shoutcast URL using HTML5 Audio on a Cordova app.

The problem I have run into is this: There appears to be no callback that fires when an audio stream loses connection to the ShoutCast URL. At this stage, the audio element shows that it is playing the audio, but there is no audio.

Code

Radio = {
    initialized: false,
    isBuffering: false,
    interrupted: false,
    isPlaying: false,
    media: null,
    trackName: '',
    url: 'shoutcast_url',
    initialize: function () {
        if (!this.media) {
            this.media = new Audio(this.url);

            this.media.preload = "none";

            this.media.onerror = function (e) {
                App.alert("Unable to connect to Radio");
                Radio.interrupt();
            };

            this.media.onwaiting = function (e) {
                Radio.set_buffering(true);
            };

            this.media.onplaying = function (e) {
                Radio.set_buffering(false);
            };
        }
    },
    set_buffering: function (value) {
    ...
    }

Scenario

• Connect to the Internet (say, through a hotspot) and start the audio radio.
• Disconnect the hotspot from the Internet.

After the buffered content is played, the audio stops playing. But no callbacks are fired that indicate loss of connection.

• media.networkState is 2 (NETWORK_LOADING)
• media.playbackRate is 1 (Playing forward at normal rate)
• media.readyState is 4 (HAVE_ENOUGH_DATA)
• media.preload is none

The callbacks that I tried, (which did not fire when connection was lost) are:

• onstalled
• onreset
• onsuspend
• onerror
• onprogress
• onwaiting

Question - Is there an audio callback that will fire when it is unable to play the audio due to lack of connection?

If not, is there any method which will update readyState or networkState? If so, I could just set a timer to check these values.

Dunbar

Can you show how you listened for the events? Stalled, for example, should work, as is documented here: developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events – Rhinelandpalatinate

@RaymondCamden Added my current code to the question. I had the callbacks added in initialize(). – Dunbar

So did you try stalled yet? this.media.addEventListener("stalled", ... – Rhinelandpalatinate

No, I did not add an event listener. I thought that onstalled would function the same. Anyway, I will update the question after I try this out. – Dunbar

@RaymondCamden this.media.addEventListener("stalled", .. doesn't fire either. It fires when the media is played the first time, but it does not fire when I disconnect the Internet connection.... – Dunbar

You got me there - sorry I can't help more. – Rhinelandpalatinate

have you tried to listen to the "ended" event? i know it doesn't make much sense since it's a stream but i had cases of wrong callbacks being triggered before – Emboly

@joyrex (Sorry for the late reply) But ended wasn't triggered either. – Dunbar

@Dunbar this might be a roundabout way, but have you tried, hooking up the audio with WebAudio and analyzing that data? – Fantom

@Fantom What interface should I use? Most of them deal with processing audio... – Dunbar

@Dunbar you could create an Javascript Node from the Audio Context, and listen to onaudioprocess , look at the buffer values, if they all remain to be zeros, you can identify the issue that way... long shot, but believe it would work – Fantom

@RaymondCamden found the solution. Posted an answer. – Dunbar

Answer 1

When a supported audio stream is played using HTML5 Audio, the best way to figure out if the audio is playing is to listen to the event timeupdate.

The timeupdate event is fired when the time indicated by the currentTime attribute has been updated.

The event fires only when audio is being played. If the audio stops, due to any reason, timeupdate doesn't fire either.

However, browser support is not complete.

• On Android 5.0 (Chrome 48), timeupdate never fires nor is currentTime updated.
• On latest desktop browsers (Mozilla 45 and Chrome 49), timeupdate functions as documented.

Dunbar

Would you please provide more details? I've got a Cordova app using "cordova-plugin-media" and the following code only fires once (when the stream begins). audioStream.ontimeupdate = alert("timeupdate fired"); – Anetta

@AndrewBucklin timeupdate does not fire on Lollipop (as far as I have understood) – Dunbar

Answer 2

Are you sure that loss of connection is actually what you want? The audio can stop and your connection effectively lost without the underlying TCP connection actually being closed. You could have no data for hours, effectively dead connection, but still have that TCP connection active.

Instead, I would recommend looking at the playback time. (Your onprogress handler is also effective.) If that isn't increasing after a timeout that you set (10 seconds or whatever is appropriate for your situation), then clear the audio player and attempt to reconnect.

Douglasdouglashome

I want to be notified when there is no audio being played, either because of buffering or due to loss of connection. onwaiting does fire just before the audio is played (because preload is none). – Dunbar

media.duration and media.currentTime are both always 0 because this is an audio URL. The callback onprogress does not update either. – Dunbar

@brad I have a similar issue with the TCP connection. I am not sure but when the internet goes down it sends only 30 requests(or 30 seconds) after that it stops sending requests but if it came back before 30 requests it starts streaming and audio play without issue. So even if the internet comes back online it doesn't play audio. What could be that limit? Here is my question #67057130 – Shun

Answer 3

You could listen for the online event to restart the stream:

window.addEventListener('online', function() {
  audio.play();
});

Refute

online event has nothing to do with audio streams. – Dunbar

In the scenario you laid out, the audio stream stops playing after you disconnect the internet. The 'online' event will be fired when the internet comes back online. – Refute

As long as the device is connected to a Wi-Fi, offline will not fire; neither would online. This question is for those cases where connection is lost between the WiFi router and the internet. – Dunbar