CODEWITHSUNDEEP
htmlbase64html5-audiowav
Hedgehog
Hedgehog

Reputation: 45

How to add audio in html5 with base64 encoding

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

Upvotes: 3

Views: 8568

Answers (2)

Damian Moore
Damian Moore

Reputation: 1336

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.

Upvotes: 0

user9552143
user9552143

Reputation:

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

Upvotes: 9

Related Questions