Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Stop audio buffering in the <audio> tag

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.

like image 922
Ruben Avatar asked Nov 06 '12 00:11

Ruben


People also ask

How do I turn off audio tag?

You can also disable an audio tag if you add style="pointer-events:none" to it…

What is the correct tag for playing an audio file?

The HTML <audio> element is used to play an audio file on a web page.

What does audio tag mean?

The <audio> tag is used to embed sound content in a document, such as music or other audio streams. The <audio> tag contains one or more <source> tags with different audio sources. The browser will choose the first source it supports.

Is audio tag deprecated?

The <bgsound> HTML element is deprecated. It sets up a sound file to play in the background while the page is used; use <audio> instead. Warning: Do not use this!

Why does my HTML5 <audio> tag keep downloading?

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.

How do I stop buffering during streaming video?

There are several ways to stop and prevent buffering on your network, such as upgrading your router, reducing background processes, and removing malware from your system. This wikiHow teaches you how to reduce buffering during streaming video.

How do I reduce buffering and bandwidth usage?

Reducing the quality of videos helps decrease bandwidth and instances of buffering. If using third-party software or services to stream videos, modify video quality via the settings menu. You should also avoid streaming video at faster speed (i.e. 1.25x speed).

How do I Turn Off sound effects in Windows 10?

Right-click your default playback device and click Properties. Click Enhancement, check the Disable all sound effects option. Click Apply and OK to save the operations. 2. Change Audio Format


2 Answers

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

like image 183
Alistair Chisholm Avatar answered Nov 09 '22 21:11

Alistair Chisholm


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

like image 21
Ruben Avatar answered Nov 09 '22 22:11

Ruben