CODEWITHSUNDEEP
htmlaudiostreamstreaming
Francisco
Francisco

Reputation: 1773

Streaming from HTML audio tag not buffering file

I'm building a page with audio streaming and I need to fast-forward and backward the audio. I'm working with the native <audio> HTML element.

I don't know why the audio isn't buffering, therefore I can't play with the currentTime property. If I use another streaming URL from another random radio it works. So I guess is related to something with the stream server.

I have many questions: 1 - What is causing the streaming not to buffering? 2 - Is something related to the audio format? AAC or MP3?

This is my audio not buffering: enter image description here

And this another audio (from other web) that buffer correctly: enter image description here

Edit: I have another clue. The stream that doesn't buffer is in AAC format and the one that its buffer is in MP3 format. Does anyone know if the format has something to do whith buffering?

Upvotes: 2

Views: 531

Answers (1)

Mikko Rantalainen
Mikko Rantalainen

Reputation: 15915

I would guess the server submitted response is not compatible with disk caching which is probably used to implement the buffering.

Things that I would check:

  • Server accepts Range headers with byte offsets.
  • Server responds with Content-Range header with correct byte offsets for the content. Make sure the response if not off-by-one if you have custom implementation. Note that HTTP spec uses weird interpretation for the offsets and length!
  • HTTP Status code should be 206 instead of 200 if the request contains header Range.
  • The response should contain header ETag which should be static as long as the media file is the same.
  • The response should contain header Cache-Control with suitable value. For details, see HTTP Headers: Controlling Cache and History Mechanism
  • Can you repeat the problem with different browser engines? For example, test with Firefox, Chrome and Safari – do they behave the same or are you dealing with some browser specific behavior.

Upvotes: 2

Related Questions