CODEWITHSUNDEEP
javascripthtmlgoogle-chromeaudiowebserver
lemiant
lemiant

Reputation: 4365

Incorrect headers stop chrome from looping HTML5 audio

I have been having a very strange and seemingly unlikely problem. I made a custom python server based off of SimpleHTTPServer, which requires me to set all my own headers. I started using it to serve .wav files and while they would play in an HTML5 tag in chrome they would not replay (via setting currentTime=0 and calling play() again). If I hosted them on standard Apache server, however, they would replay just fine. I open dev tools and slowly added and removed headers to my python server until they started playing properly. It turns out that the missing element was the "Accept-Ranges: bytes" header. Without it the wav file will not replay and with it everything works fine. Does anyone know why this happens?

Upvotes: 1

Views: 183

Answers (1)

Adrian Holovaty
Adrian Holovaty

Reputation: 2419

I've found this same thing -- browsers require the Accept-Ranges header when playing audio via the <audio> tag. In my case, this was happening with MP3s (I didn't try with WAVs).

I don't know why that happens, but if you want to avoid it, use the new Web Audio API. In my experience, Chrome/Safari/Firefox will play (and replay) audio just fine without the Accept-Ranges header if you use the Web Audio API. Here's a good starter article.

Upvotes: 2

Related Questions