如何将JSON中携带的base64音频数据应用到<audio>HTML元素中

前提说明 #

首先确认你拿到的base64音频内容格式：完整可用的音频base64资源地址格式为data:audio/[格式];base64,[编码内容]，比如mp3格式的前缀就是data:audio/mp3;base64,。如果JSON里返回的base64只有后半段的编码内容，没有前缀，需要先根据音频实际格式手动补上前缀再使用。

方式1：静态写入HTML #

如果base64内容是固定的，可以直接把完整的base64资源地址放到<audio>标签的src属性中：

<!-- 示例为mp3格式，controls属性用于显示播放控件 -->
<audio controls src="data:audio/mp3;base64,这里替换为你完整的base64内容"></audio>

你也可以根据需求添加autoplay（自动播放）、loop（循环播放）、muted（静音）等<audio>原生支持的属性。

方式2：JS动态绑定（接口返回JSON场景） #

如果是请求接口后才拿到包含base64的JSON数据，可以通过JS动态给<audio>元素赋值，示例代码如下：

// 假设接口返回的JSON结构为 { "audio_data": "base64编码内容" }
async function loadAudio() {
  // 1. 拿到接口返回的JSON数据
  const response = await fetch('你的请求接口地址').then(res => res.json())
  // 2. 拼接完整的音频资源地址，这里以mp3格式为例，根据实际格式调整
  const audioSrc = `data:audio/mp3;base64,${response.audio_data}`
  // 3. 绑定到audio元素
  const audioElement = document.querySelector('audio')
  audioElement.src = audioSrc
  // 如果需要触发自动播放可以加下行代码，注意大部分浏览器需要用户交互后才允许自动播放
  // audioElement.play()
}

• 前缀中的音频格式必须和实际base64对应的音频格式匹配，否则会出现无法播放的问题
• 如果JSON里返回的base64已经自带data:audio/xxx;base64,前缀，不需要重复拼接，直接赋值给src即可
• 体积过大的音频不建议用base64传输，base64编码会比原二进制文件增加约33%的体积，会拖慢加载速度

内容的提问来源于stack exchange，提问作者David