Node.js+Angular对接谷歌Text-To-Speech返回音频无法播放问题

数据老陈

2026-10-5

问题根因

你将后端返回的二进制MP3音频错误地以text格式解析，得到的乱码内容被Audio构造函数识别为相对路径，浏览器自动拼接当前域名发起无效请求，同时无法解析非法媒体资源，因此抛出报错。

修复方案

1. 修改Angular服务请求配置

将HttpClient的响应类型从text改为blob，正确接收二进制音频数据：

public textToSpeech(txt: string) {
  let httpParams: HttpParams = new HttpParams()
    .set('txt', txt)
  return this.http.get('//localhost:3030/api/tts', { params: httpParams, responseType: 'blob' })
}

2. 调整组件播放逻辑

拿到Blob响应后，生成可被Audio识别的临时资源地址再实例化播放，同时可新增内存释放逻辑避免泄漏：

onButtonClick() {
  this.speechService.textToSpeech('testing')
  .subscribe(res => {
    const audioUrl = URL.createObjectURL(res);
    this.audio = new Audio(audioUrl);
    this.audio.play();
    // 音频播放结束后释放内存
    this.audio.onended = () => {
      URL.revokeObjectURL(audioUrl);
    };
  })
}