如何使用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 。