如何在客户端播放Google Cloud TTS生成的Base64编码音频文件

阿华AIGC实验室

2026-5-22

解决Google Cloud TTS字节数组播放杂音问题

我之前也踩过GCP TTS直接播放字节数组的坑，出现杂音大概率是音频格式处理或者解码细节没到位，给你几个针对性的排查和解决方向：

1. 先确认Base64解码后的字节是否完全正确

有时候拿到的Base64字符串可能带有额外的换行、空格或者转义字符，导致解码后的字节和保存的WAV文件不一致。你可以做个简单对比：

把解码后的字节数组写入本地文件，和你之前能正常播放的WAV文件对比字节长度或者MD5值
如果不一致，检查是否直接使用了GCP返回的audioContent字段（注意不要额外处理这个字符串，比如去掉引号或者转义）

举个JS里的正确解码示例：

// 假设gcpResponse是从GCP接口拿到的响应
const ttsBase64 = gcpResponse.audioContent;
// 解码成Uint8Array
const decodedBytes = Uint8Array.from(atob(ttsBase64), char => char.charCodeAt(0));

2. 关键：确认请求的音频编码格式

这是最容易踩的坑！GCP TTS的默认音频编码可能不是带容器的WAV，而是原始PCM（LINEAR16）——这种格式没有WAV文件头，直接播放原始字节就会出现刺耳杂音。

解决方案A：请求带容器的音频格式

在调用TTS接口时，指定audioEncoding为WAV或者MP3，这样返回的Base64解码后就是完整的带文件头的音频文件，直接播放就没问题：

# Python示例：指定WAV格式
from google.cloud import texttospeech

client = texttospeech.TextToSpeechClient()
input_text = texttospeech.SynthesisInput(text="你好，这是测试音频")
voice = texttospeech.VoiceSelectionParams(
    language_code="zh-CN", ssml_gender=texttospeech.SsmlVoiceGender.NEUTRAL
)
# 重点：设置音频编码为WAV
audio_config = texttospeech.AudioConfig(
    audio_encoding=texttospeech.AudioEncoding.WAV
)
response = client.synthesize_speech(
    input=input_text, voice=voice, audio_config=audio_config
)

解码后直接用Blob播放：

const blob = new Blob([decodedBytes], { type: "audio/wav" });
const audioUrl = URL.createObjectURL(blob);
const audio = new Audio(audioUrl);
audio.play();

解决方案B：如果必须用LINEAR16格式

如果因为某些原因只能用原始PCM，需要手动处理音频缓冲区，告诉浏览器正确的采样率、声道数和位深：

const audioContext = new AudioContext({ sampleRate: 16000 }); // GCP LINEAR16默认采样率16000Hz
const pcmLength = decodedBytes.length / 2; // 16位PCM，每个样本占2字节
const audioBuffer = audioContext.createBuffer(1, pcmLength, 16000); // 单声道
const channelData = audioBuffer.getChannelData(0);

// 将16位有符号PCM转成Float32Array（浏览器音频API要求的格式）
const dataView = new DataView(decodedBytes.buffer);
for (let i = 0; i < pcmLength; i++) {
  // 小端字节序读取16位整数，转成-1到1之间的浮点数
  channelData[i] = dataView.getInt16(i * 2, true) / 32768;
}

// 播放缓冲区
const source = audioContext.createBufferSource();
source.buffer = audioBuffer;
source.connect(audioContext.destination);
source.start();