HTML5 using src using raw binary data

Question

Let's say I am storing an audio file in the database and later on I would want to use that BLOB or binary in my application.

<audio src ="${sessionScope.user.music}"> 

Where ${sessionScope.user.music} returns a binary data that has been retrieve from the database.

would it be possible to load an audio file in an audio tag, using binary data instead of a uri? or path?

Answer 1

A bit like inline images:

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/
f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67
QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g7
7ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"
    width="16" height="14" alt="embedded folder icon">

Where this works for <img>, I am far from sure that data:audio/mp3;base64, ... (or audio/ogg) would work. It is not in my HTML5 reference.

For the encoding, see JEditorPane with inline Image.

Answer 2

i was in need to inline large amounts (some MB) of binary data for threejs 3D display.

This is what i came up with:

1. write the 8bit binary data into a png file
2. base64 encode the resulting run-length compressed png file
3. use <img src="data:image/png;base64,...."> to include that into the html5 file
4. create a hidden canvas of appropriate dimension and use context.drawImage and context.getImageData to extract the binary data which is finally stored in an Uint8ClampedArray
5. calculate the needed Float32Array(s) for threejs from that Uint8ClampedArray

I don't know if this works to provide binary music data also, but the question wasn't mentioning music data and it might be helpful for others who stranded here like me looking for general solutions to include binary data into HTML5 :-)