如何在JavaScript中从TTS音频获取数据并保存Web Speech API生成的音频文件？

一、获取TTS音频数据 #

Web Speech API的speechSynthesis并未直接提供音频数据的获取接口，我们可以通过媒体流捕获的方式间接获取：将语音合成的输出路由到MediaStreamDestination，再用MediaRecorder录制流数据，最终得到音频Blob。

实现代码 #

// 1. 初始化媒体流目标与录音器
const audioDestination = new MediaStreamDestination();
const mediaRecorder = new MediaRecorder(audioDestination.stream);
const audioChunks = [];

// 收集录音数据块
mediaRecorder.ondataavailable = (event) => {
  if (event.data.size > 0) {
    audioChunks.push(event.data);
  }
};

// 录音结束后处理完整音频数据
mediaRecorder.onstop = () => {
  const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
  // 此处可对audioBlob进行后续处理（如转ArrayBuffer、上传等）
  console.log("捕获到的音频Blob:", audioBlob);
};

// 2. 配置语音合成并关联媒体流
const utterance = new SpeechSynthesisUtterance("这是Web Speech API生成的测试语音");

// 确保语音加载完成
speechSynthesis.getVoices();

// 语音开始时启动录音
utterance.onstart = () => {
  mediaRecorder.start();
};

// 语音结束后延迟停止录音（避免截断末尾音频）
utterance.onend = () => {
  setTimeout(() => mediaRecorder.stop(), 100);
};

// 将语音合成输出导向媒体流目标
const audioContext = new AudioContext();
const synthSource = audioContext.createMediaStreamSource(audioDestination.stream);
synthSource.connect(audioContext.destination);

// 开始语音合成
speechSynthesis.speak(utterance);

二、将TTS音频保存为文件 #

基于上述获取的音频Blob，我们可以通过创建临时下载链接的方式触发浏览器保存文件：

实现代码 #

// 保存Blob为文件的工具函数
function saveAudioToFile(blob, filename = "tts-audio.webm") {
  const downloadUrl = URL.createObjectURL(blob);
  const link = document.createElement("a");
  
  link.style.display = "none";
  link.href = downloadUrl;
  link.download = filename;
  
  document.body.appendChild(link);
  link.click();
  
  // 清理资源
  document.body.removeChild(link);
  URL.revokeObjectURL(downloadUrl);
}

// 在录音结束回调中调用保存函数
mediaRecorder.onstop = () => {
  const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
  saveAudioToFile(audioBlob);
};

注意事项 #

• 浏览器兼容性：优先使用Chrome、Edge等Chromium内核浏览器，部分旧版浏览器对MediaStreamDestination与speechSynthesis的结合支持有限。
• 音频格式：默认录制为WebM格式，若需MP3等其他格式，需借助第三方编码库（如ffmpeg.wasm）转码，但这超出了纯Web Speech API的范畴。
• 交互限制：浏览器要求音频相关操作必须在用户交互（如点击、按键）触发的回调中执行，否则会被安全策略阻止。

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