HTML5 using src using raw binary data

Question

Say I store an audio file in a database, and later I would like to use this BLOB or binary in my application.

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

Where ${sessionScope.user.music} returns the binary data that was extracted from the database.

Is it possible to load an audio file into an audio tag using binary data instead of uri? or way?

Answer 1

A bit like embedded 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"> 

If this works for <img> , I'm not sure if data:audio/mp3;base64, ... (or audio/ogg ) will work. This is not in my HTML5 link.

For encoding see JEditorPane with inline image .

Answer 2

I needed to embed large amounts (some MB) of binary data for a three-dimensional 3D display.

Here is what I came up with:

• write 8-bit binary data to png file
• base64 encodes the resulting compressed png file with a string length
• use <img src="data:image/png;base64,...."> to include this in the html5 file
• create a hidden canvas of the appropriate size and use context.drawImage and context.getImageData to retrieve the binary data that is finally stored in Uint8ClampedArray
• compute required Float32Array values ​​for three js from this Uint8ClampedArray

I don’t know if this also works for providing binary music data, but the question was not about music data, and it may be useful for others who are here, like me, looking for common solutions for including binary data in HTML5 :-)

Answer 3

you need to convert your binary data to string using javascript. See Message