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

Question

我有一个字符串，它是 base64 编码和 wav 格式的音频记录（我有数据 link - {{vm.record}}）。我需要在 widget 中添加音频播放器（写在 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）中出现性能问题和错误。出于这个原因，我建议将 Base64 转换为二进制 Blob，如 using the convertDataURIToBinary 片段所述，然后将其设置为 audio.src.

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

how add audio in html5 with base64 encoding

html

base64

wav

html5-audio