Adding HTML5 audio as embedded mp3 data URI

Question

I have an HTML audio element that plays a linked .mp3 file upon click:

<audio id="yourAudio" preload="none" onplay="playing(this);" onended="stopped(this);">
    <source src="/sandboxassets/pronunciations/esdar1e007.mp3" type="audio/mpeg">
</audio>

I don't want to display the direct link to the audio file (/sandboxassets/pronunciations/esdar1e007.mp3) in the HTML source. Is there any way to obfuscate it? I know we can use base64 encoding to obfuscate image links turning them into data URIs but I don't know how to do the same with mp3 files, if at all that's possible. Also, will that be a wise move compatibility-wise?

Addition: For what it's worth, there could be up to 5 such audio elements on my page and each such element loads an mp3 of size between 8kB and 20kB. I am assuming this scenario should justify a higher file size vs. fewer HTTP requests tradeoff. But please correct me if I'm wrong.

Answer 1

Yes, you can use data URIs to do this. Just put the data URI in your src value. For example:

<audio controls src="data:audio/ogg;base64,XXXXXX....." />

See this page for a working example