'how add audio in html5 with base64 encoding

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


Solution 1:[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! :)

Solution 2:[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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 4424dev
Solution 2 Damian Moore

Related Questions