Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Stop audio buffering in the <audio> tag

Tags:

html

html5-audio

buffering

audio-streaming

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
Sign in to Comment

Related questions

Event handler for a html5 color input element
Aligning text on a specific character
How can I check if append element already exists? [duplicate]
highlight menu on scrolling (if reach div)
Using ASP.NET in GitHub Pages
How to remove the Android WebView print added margin?
When not to use mobile-web-app-capable
How to show local picture in web page?
Bold text line-height is higher than normal text line-height
What does it mean when the form action attribute is "#" (number/pound symbol/sign/character)?
iPhone Numeric Keypad with Decimal for web apps?
How to stack items above each other with flex box?
Converting a jQuery plugin to TypeScript
Why does dynamically generating an SVG using HTMLObjectElement lead to a Cross-Origin error?
How to set font size for a paragraph whose content is being constantly replaced
Set inner table border in HTML
Gotchas/bugs in development for WebKit on iOS or Android
Page not reloading via 'back' when using pushState() / onpopstate
What happens to an HTML5 web worker thread when the tab is closed while it's running?
Saving canvas as a PNG or JPG

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!