Turns out that you can use data URIs in the
Just upload an MP3 file to http://dataurl.net/#dataurlmaker and you’ll get a long string starting with
Insert this into your HTML:
<audio controls src=”data:audio/mp3;base64...”>
That’s it – the entire MP3 file is embedded into your HTML page without requiring additional downloads.
This takes a bit more bandwidth than the MP3, and won’t work on Internet Explorer. But for modern browsers, and small audio files, it reduces the overall load time – sort of like CSS sprites.
So, on my bus ride today, I built a little HTML5 musical keyboard that generates data URIs on the fly. Click to play.