Javascript中等价base64 -d实现：React解码GCP TTS返回base64音频生成mp3失败

你当前的实现错误核心是：Base64解码得到的字符串直接传入Blob时，Blob会将字符串按UTF-8编码序列化，原本对应单字节二进制值的字符会被转成多字节格式，最终生成的文件二进制结构损坏，无法被识别为有效MP3。

正确实现代码 #

你需要先把解码后的字符串转成Uint8Array类型的二进制数组，再传入Blob构造函数：

// 1. 解码base64格式的音频内容
const decodedStr = atob(audioContent);
// 2. 转成Uint8Array存储原始二进制数据
const uint8Array = new Uint8Array(decodedStr.length);
for (let i = 0; i < decodedStr.length; i++) {
  uint8Array[i] = decodedStr.charCodeAt(i);
}
// 3. 生成Blob和下载链接
const audioBlob = new Blob([uint8Array], { type: 'audio/mpeg' });
const downloadUrl = URL.createObjectURL(audioBlob);
// 4. 配置下载链接，建议加上download属性指定文件名
const aTag = document.querySelector('a');
aTag.href = downloadUrl;
aTag.download = 'response.mp3';

如果使用js-base64库，可以直接调用内置方法简化转换步骤：

const uint8Array = Base64.toUint8Array(audioContent);
// 后续生成Blob、配置下载链接的逻辑和上文一致

额外注意事项 #

• audio/mpeg是MP3格式的标准MIME类型，比audio/mp3的浏览器兼容性更好
• 页面卸载或下载功能使用完毕后，建议调用URL.revokeObjectURL(downloadUrl)释放内存，避免内存泄漏

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