HTML5 Audio and nginx
March 13, 2011
I was developing a site that uses the HTML5 audio tag. This worked fine in the Django test server, but once deployed some browsers had problems playing back the sounds (I got silence).
Here's my HTML source for the audio tag. As you can see, I'm serving three types so that hopefully it'll be supported in all browsers.
<audio id="an1"> <source src="/site_media/sounds/hh.ogg" type="audio/ogg"/> <source src="/site_media/sounds/hh.wav" type="audio/wave"/> <source src="/site_media/sounds/hh.mp3" type="audio/mp3"/> </audio>
The problem appears to be related to mime types. We can test this with curl:
tjs@local:~$ curl http://percussion360.com/site_media/sounds/hh.wav -I HTTP/1.1 200 OK Content-Type: text/plain tjs@local:~$ curl http://percussion360.com/site_media/sounds/hh.ogg -I HTTP/1.1 200 OK Content-Type: text/plain tjs@local:~$ curl http://percussion360.com/site_media/sounds/hh.mp3 -I HTTP/1.1 200 OK Content-Type: audio/mpeg
Hmm, looks like mp3s are probably fine, and the other two aren't.
Looking at /etc/nginx/mime.types on the server, we can see an entry for mp3, but not for the others:
audio/midi mid midi kar; audio/mpeg mp3; audio/x-realaudio ra;
If we add in the other types, we end up with this:
audio/mpeg mp3; audio/ogg ogg; audio/wave wav;
If we now request the files they have the correct mime types:
tjs@local:~$ curl http://percussion360.com/site_media/sounds/hh.ogg -I HTTP/1.1 200 OK Content-Type: audio/ogg tjs@local:~$ curl http://percussion360.com/site_media/sounds/hh.wav -I HTTP/1.1 200 OK Content-Type: audio/wave
Playback from the browser is now much more reliable.
