Stop audio buffering in the <audio> tag

Question

I am currently working in using the HTML5 audio player to provide a audio stream (24/7 radio stream) via the (mobile) browser. Loading in the stream and playing it works fine.

The major problem is that the HTML5 <audio> tag will keep downloading (buffering) content even when its not active. This could be a major issue for mobile users since most of them pay for data use. So far I have not been able to find a decent solutions that works cross browser to prevent this.

I tried so far:

1. Unload the source when pause is pressed. < This does not work cross browser
   
2. Remove the audio player element and load a new one. This works but lets be honest, this is a very hacky way of performing an extremely simple task.

I was simply wondering if there is something I'm overlooking in this whole issue since I am convinced I'm not the only one with this issue.

Solution 1

I found a workable solution for the problem described above. A detail description can be found here: https://stackoverflow.com/a/13302599/1580615

Solution 2

The <audio> element includes a preload attribute. This can be set to "none" or "metadata" which should prevent the audio preloading.

Source: https://developer.mozilla.org/en/docs/Web/HTML/Element/audio

Solution 3

You can do the following to stop buffering load without errors:

var blob = new Blob([], {type: "audio/mp3"});
var url = URL.createObjectURL(blob);
audio.src = _url;

or, shortened up:

audio.src = URL.createObjectURL(new Blob([], {type:"audio/mp3"});

Now you're not loading a "" which is a bad url for the audio tag to try and load. You're instead loading an actual url made from a Blob that just contains no data for the audio to playback.

Comments

[Artur Bodera]

This is not a good solution and will throw errors on webkit (chrome, ios etc.)

[Rohmer]

This is the most elegant solution. Setting to "none" downloaded no data and setting to "metadata" downloaded 517kb of data. My test was for a voscast stream.

[m3nda]

It's not only elegant, it's the way to do it. I was triying to set it to "false" like a noob :), setting it to "none" did worked. U can set it to "auto" too. You'll get lof ot problems if you have stream sources and ajax pages. The audio objects are being cached by browser, and you'll grow your bandwith usage with every load.

[Petr Marek]

err in firefox: "Media resource blob:localhost:4200/c68c796c-5af0-5343-a68d-9043c4c9b9a2 could not be decoded." err chrome: "GET blob:localhost:4200/fec774b7-7680-48a9-927e-1926685da447 416 (Requested Range Not Satisfiable)" when using type: "video/mp4"