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?

@BrianAgnew looks I forgot to place the last statement, I have updated it. — KyelJmD, Nov 30 '12 at 12:29
Why cannot you just use url like `src="/user/music"` and have that URL respond with the audio file? — Esailija, Dec 01 '12 at 12:01

score 9 · Accepted Answer · edited May 23 '17 at 11:54

9

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.

edited May 23 '17 at 11:54

Community

1
1

answered Nov 30 '12 at 12:41

Joop Eggen

107,315
7
83
138

@HarloHolmes, I love that. Firefox and IE? – Joop Eggen Jan 15 '13 at 08:07

score 1 · Answer 2 · answered Jul 06 '15 at 08:46

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

This is what i came up with:

write the 8bit binary data into a png file
base64 encode the resulting run-length compressed png file
use <img src="data:image/png;base64,...."> to include that into the html5 file
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
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 :-)

I am in the same situation, how about the size, I read base64 increase the size — Mim, Apr 02 '19 at 08:16
I made a small javascript library that does exactly that: https://github.com/lovasoa/bin2png — lovasoa, Dec 02 '19 at 22:06

score 0 · Answer 3 · edited May 23 '17 at 12:10

0

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

edited May 23 '17 at 12:10

Community

1
1

answered Nov 30 '12 at 12:29

Jayant Varshney

1,765
1
25
42

why would I need to convert that raw binary data into string? – KyelJmD Nov 30 '12 at 12:30
1

beacause HTML does not know binary... you have to provide it in a string – Jayant Varshney Nov 30 '12 at 12:36
yup.. it will interpret it.... many of the flash files, videos and other media objects are placed in the form of strings.. actually this string is a Base64 format.. have look on this link... http://en.wikipedia.org/wiki/Base64 – Jayant Varshney Nov 30 '12 at 12:49
if you find that this answer solves your problem then please mark it is answer – Jayant Varshney Nov 30 '12 at 12:58

HTML5 using src using raw binary data

3 Answers3

Linked