how add audio in html5 with base64 encoding

Question

i have a string it is audio record in base64 encoding and in wav format(i have data link - {{vm.record}}). I need add audio player in widget( which had written on js + html) that play audio to me

I don't understand why it don't work ? do i must to write smth in js that this start work ? where i can write about encoding ?

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

i know that this is wrong "type="audio/wav; base64" but how right? i try this, but it don't work too

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

is that angular ? src={{vm.record}} ?? Could you check the browser console ? — Ahmed Kesha, Dec 12 '19 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, Dec 12 '19 at 15:28
It is byte array base64 wav get from microphone with pyaudio - `{{vm.record}}` = TWFuIGlzIGRpc3Rpbmd1aXNoZWQsIG5vdCBvbmx5IGJ5IGhpcyByZWFzb24sIGJ1dCAuLi4= — Hedgehog, Dec 13 '19 at 06:35

score 5 · Accepted Answer · answered Dec 12 '19 at 15:29

5

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 '19 at 15:29

1

ok, but how i can write link and type of data in src at the same time ? – Hedgehog Dec 13 '19 at 06: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 https://iandevlin.com/blog/2012/09/html5/html5-media-and-data-uri/ website as it explains data URIs well and has some examples too! – Dec 13 '19 at 13:08

score 0 · Answer 2 · answered May 12 '22 at 20:31

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.

how add audio in html5 with base64 encoding

2 Answers2

Linked

Related