如何在JavaScript/React中将后端返回的Base64格式MP3转为浏览器可播放音频？

尝试从后端获取.mp3文件并实现可播放音频功能，后端将.mp3文件转换为Base64格式后返回（直接发送.mp3文件无法生效）。通过以下代码获取后端返回的Base64格式MP3：

axios
  .post(`abcEndPoint`, {
    text: textValue
  })
  .then((res) => {
    setAudio(res.data)
    console.log(res.data)
  });

res.data为Base64格式字符串。通过以下函数将Base64转换为audio标签可识别的URL：

function base64ToImageUrl(base64String) {
  return `data:audio/mpeg;base64,${base64String}`;
}

尝试过将MIME类型改为audio/wav、.mp3、audio/mp3，最终音频JSX代码如下：

<>
  <audio controls>
    <source src={base64ToImageUrl(audio)} />
    Your browser does not support the audio element.
  </audio>
</>

请问哪里操作有误？这种需求在React/JavaScript中是否可行？

这种需求完全可行，问题大概率出在以下几个环节：

• 检查Base64字符串是否存在冗余内容
  若后端返回的Base64已经自带data:audio/mpeg;base64,前缀，你再次拼接就会导致data URL格式错误。可以先打印res.data的开头部分，确认是否已有前缀，若有则直接使用res.data作为src，无需额外拼接。

• 验证Base64编码的有效性
  把res.data复制到在线Base64转文件工具中，生成MP3文件后尝试播放。如果无法播放，说明后端的MP3转Base64过程存在错误，需要排查后端转码逻辑。

• 确保React状态更新后再渲染音频组件
  若audio组件在audio状态未初始化时就渲染，会导致src为空或无效。可以添加条件渲染，仅当audio有值时才渲染音频：

  {audio && (
    <audio controls>
      <source src={base64ToImageUrl(audio)} type="audio/mpeg" />
      Your browser does not support the audio element.
    </audio>
  )}
  

• 使用标准MIME类型
  MP3的标准MIME类型是audio/mpeg，不要使用非标准的audio/mp3，同时建议在<source>标签上明确指定type="audio/mpeg"，帮助浏览器正确识别音频格式。

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