How to add audio in html5 with base64 encoding

Question

I have a string that is audio encoded in base64 and in wav format (I have adata link - {{vm.record}}).

I need to add an audio player in a widget which is written in js + html.

I don't understand why this didn't work. Do I need to write something in js to make this work? Where I can specify encoding ?

<audio 
    controls 
    src={{vm.record}} type="audio/wav; base64" autobuffer="autobuffer" autoplay="autoplay">
    Your browser does not support the <code>audio</code> element.
</audio>

I know that "type="audio/wav; base64" is wrong.

I also tried this, but it didn't work:

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

is that angular ? src={{vm.record}} ?? Could you check the browser console ? — Ahmed Kesha, Commented Dec 12, 2019 at 15:28
You say the recording is in wav format. That suggests in your second code sample, you should replace audio/ogg by audio/wave. The first code sample might be wrong because the data format prefix is missing there, but it's hard to tell without seeing the exact content behind {{vm.record}}. — Ruud Helderman, Commented Dec 12, 2019 at 15:28
It is byte array base64 wav get from microphone with pyaudio - {{vm.record}} = TWFuIGlzIGRpc3Rpbmd1aXNoZWQsIG5vdCBvbmx5IGJ5IGhpcyByZWFzb24sIGJ1dCAuLi4= — Hedgehog, Commented Dec 13, 2019 at 6:35

user9552143user9552143 · Accepted Answer · 2019-12-12 15:29:40Z

9

You can have an HTML5 audio tag in base64 encoding as so:

<audio controls autoplay loop src="data:audio/ogg;base64,BASE64CODE" />

No need for a type! :)

answered Dec 12, 2019 at 15:29

user9552143

1

ok, but how i can write link and type of data in src at the same time ?
– Hedgehog
Commented Dec 13, 2019 at 6:44
1

@Hedgehog Many file types have data URIs. They are data:audio/ogg for OGG files, data:image/png for PNG files, etc etc. You can end a data URI with base64 if you follow along with ;base64, I like to use this iandevlin.com/blog/2012/09/html5/html5-media-and-data-uri website as it explains data URIs well and has some examples too!
– user9552143
Commented Dec 13, 2019 at 13:08

Add a comment |

Damian Moore · Accepted Answer · 2022-05-12 20:31:13Z

0

If your audio files are over about 20MB then you might run into performance problems and errors in some browsers (notably Firefox). For this reason I recommend converting the Base64 into a binary Blob as described here using the convertDataURIToBinary snippet and then setting that as the audio.src.

answered May 12, 2022 at 20:31

Damian Moore

1,3363 gold badges12 silver badges13 bronze badges

Add a comment |

Collectives™ on Stack Overflow

How to add audio in html5 with base64 encoding

2 Answers 2

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Linked

Related