Cole Cole - 1 year ago 93
HTML Question

How can I stop and resume a live audio stream in HTML5 instead of just pausing it?

A notable issue that's appearing as I'm building a simple audio streaming element in HTML5 is that the

tag doesn't behave as one would expect in regards to playing and pausing a live audio stream.

I'm using the most basic HTML5 code for streaming the audio, an
tag with controls, the source of which is a live stream, which can be demonstrated here:

Current outcome: When the stream is first played, it plays whatever is streaming as expected. When it's paused and played again, however, the audio resumes exactly where it left off when the stream was previously paused. The user is now listening to a delayed version of the stream. This occurrence isn't browser-specific.

Desired outcome: When the stream is paused, I want the stream to stop. When it is played again, I want it resume where the stream is currently at, not where it was when the user paused the stream.

Does anyone know of a way to make this audio stream resume properly after it's been paused?

Some failed attempts I've made to fix this issue:

  • Altering the
    of the audio element does nothing to streaming audio.

  • I've removed the audio element from the DOM when the user stops stream playback and added it back in when user resumes playback. The stream still continues where the user left off and worse yet downloads another copy of the stream behind the scenes.

  • I've added a random GET variable to the end of the stream URL every time the stream is played in an attempt to fool the browser into believing that it's playing a new stream. Playback still resumes where the user paused the stream.

Answer Source

One solution I came up with while troubleshooting this issue was to ignore the play and pause functions on the audio element entirely and just set the volume property of the audio element to 0 when user wishes to stop playback and then set the volume property back to 1 when the user wishes to resume playback.

The JavaScript code for such a function would look much like this if you're using jQuery (also demonstrated in this fiddle):

 * Play/Stop Live Audio Streams
 * "audioElement" should be a jQuery object
function streamPlayStop(audioElement) {
  if (audioElement[0].paused) {
  } else if (!audioElement[0].volume) {
    audioElement[0].volume = 1;
  } else {
    audioElement[0].volume = 0;

I should caution that even though this achieves the desired functionality for stopping and resuming live audio streams, it isn't ideal because the stream, when stopped, is actually still playing and being downloaded in the background, using up bandwidth in the process.

However, this solution doesn't necessarily take up more bandwidth than just using .play() and .pause() on a streaming audio element. Simply using the audio tag with streaming audio uses up a great deal of bandwidth anyway, because once streaming audio is played, it continues to download the contents of the stream in the background when it is paused.

It should be noted that this method won't work in iOS because of purposefully built-in limitations for iPhones and iPads:

On iOS devices, the audio level is always under the user’s physical control. The volume property is not settable in JavaScript. Reading the volume property always returns 1.

If you choose to use the workaround in this answer, you'll need to create a fallback for iOS devices that uses the play() and pause() functions normally, or your interface will be unable to pause the stream.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download