如何使用base64编码在html5中添加音频

Question

我有一个字符串，它是 base64 编码和 wav 格式的音频记录（我有数据链接 - {{vm.record}}）。 我需要在小部件（写在 js + html 上）中添加音频播放器，向我播放音频

我不明白为什么它不起作用？ 我是否必须在 js 中编写 smth 才能开始工作？ 我可以在哪里写关于编码的文章？

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

我知道这是错误的 "type="audio/wav; base64" 但是如何正确？我试试这个，但它也不起作用

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

Answer 1

您可以使用 base64 编码的 HTML5 audio标签，如下所示：

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

不需要type ！ :)

Answer 2

如果您的音频文件超过 20MB，那么您可能会在某些浏览器（尤其是 Firefox）中遇到性能问题和错误。 出于这个原因，我建议使用convertDataURIToBinary片段将 Base64 转换为二进制 Blob，如此处所述，然后将其设置为audio.src 。