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.

Answer 1

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.

Answer 2

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.

Answer 3

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

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