1

I use an HTML Audio element in Angular to play back podcasts:

var audio = new Audio();
audio.src = 'http://<some_mp3_file>';
audio.play();

I figured out that various browsers require various amount of audio data to be preloaded before they actually start playback.

This is how I figured it out. I set up a simple timer to detect the amount of data in buffer:

setInterval(() => {
  var bufferState = [];
  for (var i=0; i<audio.buffered.length; i++) {
    bufferState.push({
      start: audio.buffered.start(i),
      end: audio.buffered.end(i),
    })
  }
  this.bufferState = bufferState;
  console.log(bufferState);
}, 1000);
  • On an iPad with iPadOS 13 it preloads 60 seconds and the playback starts.
  • On an iPhone with iOS 10.3 it however preloads 15 minutes (!) of audio data before playback starts.

In case of the iPhone it means that on an LTE connection it takes about ~2 minutes before the playback starts :( This makes my users frustrated :(

(The iPad was connected to the internet via the iPhone's personal hotspot in this experiment to make it sure that they share exactly the same network quality.).

Is it possible to shorten (control) the amount of buffered data so that the playback can start on iPhones with older iOS faster?

Tyler Mc
  • 228
  • 1
  • 7
adamsfamily
  • 1,746
  • 19
  • 37
  • 1
    Have you tried setting `audio.preload` to `none` or `metadata`? Reference - (https://stackoverflow.com/questions/13242877/stop-audio-buffering-in-the-audio-tag) – Ryan Wilson Aug 21 '20 at 12:29
  • Yes, I just tried to add `audio.preload = 'none'` to my first codeblock, it didn't work. I think that the question you are referring to deals with the problem that the Audio tag is preloading the media even if the user hasn't started playing - that's the `preload` attribute doing according to the documentation. My problem is that playback doesn't start until a large chunk is preloaded and it appearently depends on the iOS version, too :( – adamsfamily Aug 21 '20 at 18:12
  • The only time I've seen this sort of buffering behavior is when the file was corrupt, or when the `Content-Type` header was incorrect. Can you show the full HTTP request/response headers, and also provide a sample MP3 file? – Brad Aug 23 '20 at 00:19

0 Answers0