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"/>

Answer 1

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 ! :)

Answer 2

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 .