Angular播放Base64编码MP3报错：Failed to execute 'atob' on 'Window'

问题场景 #

将ByteArray转Base64后，在StackBlitz环境中可正常转换并播放MP3，但本地代码执行时抛出错误：ERROR DOMException: Failed to execute 'atob' on 'Window'。

核心原因 #

atob解码失败通常是因为Base64字符串存在格式问题：

• 后端返回的Base64包含URL编码字符（如+被转成%2B）、多余空格或换行符
• 本地HTTP请求的响应数据被自动转义，导致atob无法解析
• 代码中错误拼接了MIME类型（audio/ogg而非MP3对应的audio/mpeg），虽不直接触发解码错误，但可能引发后续播放问题

解决方案 #

1. 修复Base64字符串预处理逻辑 #

在解码前清理非法字符，确保Base64格式合规：

convertDataURIToBinary(dataURI: string): Uint8Array {
  const BASE64_MARKER = ';base64,';
  const base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
  let base64 = dataURI.substring(base64Index);

  // 解码URL编码字符并移除空白字符
  base64 = decodeURIComponent(base64).replace(/\s/g, '');
  // 补全Base64长度至4的倍数（Base64规范要求）
  while (base64.length % 4 !== 0) {
    base64 += '=';
  }

  try {
    const raw = window.atob(base64);
    const rawLength = raw.length;
    const array = new Uint8Array(rawLength);

    for (let i = 0; i < rawLength; i++) {
      array[i] = raw.charCodeAt(i);
    }
    return array;
  } catch (e) {
    console.error('Base64解码失败:', e);
    throw e;
  }
}

2. 修正MIME类型拼接 #

将错误的audio/ogg替换为MP3对应的audio/mpeg：

data = 'audio/mpeg;base64,' + data; 

3. 直接请求Blob响应（推荐） #

如果后端支持，跳过Base64转换环节，直接获取Blob类型的音频数据，避免解码问题：

// 先修改服务层的请求配置，指定响应类型为blob
getAudioBlob(url: string): Observable<Blob> {
  return this.http.get(url, { responseType: 'blob' });
}

// 组件中调用
this.testService.getAudioBlob(`fileEndpoint-file/${doc.id}/source`)
  .subscribe((blob) => {
    this.audioSource = URL.createObjectURL(blob);
  });

调试建议 #

• 本地打印后端返回的data，与StackBlitz中的数据对比，排查是否存在字符差异
• 检查本地HTTP响应头，确认返回的Content-Type是否为text/plain或application/base64

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