Chrome浏览器下基于指定WAV文件实现STT的技术求助

webkitSpeechRecognition（标准API为SpeechRecognition）默认仅捕获设备麦克风输入，无法直接导入WAV文件作为识别源。要实现文件转文字，需将WAV文件转换为MediaStream，让识别API读取该流而非麦克风输入。

核心思路 #

1. 加载并解码WAV文件为AudioBuffer
2. 通过AudioContext.createMediaStreamDestination()将音频数据转换为MediaStream
3. 将自定义流绑定到语音识别实例，启动识别

修改后的完整代码 #

const audioUrl = 'http://localhost/wav/snd_thank_en.wav';
// 兼容标准与webkit前缀的语音识别API
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.lang = 'en-US';
recognition.continuous = true;
recognition.interimResults = true;

const startBtn = document.getElementById('start-recognition-btn');
const resultEl = document.getElementById('recognition-result');

let audioStream;

// 预加载音频并转换为MediaStream
async function prepareAudioStream() {
  try {
    const res = await fetch(audioUrl);
    const bufferData = await res.arrayBuffer();
    const audioCtx = new AudioContext();
    const audioBuffer = await audioCtx.decodeAudioData(bufferData);

    // 创建MediaStream输出目标
    const streamDest = audioCtx.createMediaStreamDestination();
    const sourceNode = audioCtx.createBufferSource();
    sourceNode.buffer = audioBuffer;
    sourceNode.connect(streamDest);

    audioStream = streamDest.stream;
    console.log('音频文件已转换为可识别的MediaStream');
  } catch (err) {
    console.error('音频加载失败:', err);
  }
}

startBtn.addEventListener('click', async () => {
  startBtn.disabled = true;
  // 确保音频流已准备完成
  if (!audioStream) await prepareAudioStream();
  
  // 绑定自定义流到识别实例（仅Chrome等Blink内核浏览器支持）
  if ('stream' in recognition) {
    recognition.stream = audioStream;
  } else {
    console.warn('当前浏览器不支持自定义识别流，请使用Chrome浏览器尝试');
    startBtn.disabled = false;
    return;
  }

  recognition.start();
  console.log('基于WAV文件的语音识别已启动');

  // 可选：播放音频（方便验证识别时机）
  const audioCtx = new AudioContext();
  const sourceNode = audioCtx.createBufferSource();
  sourceNode.buffer = await audioCtx.decodeAudioData(await fetch(audioUrl).then(res => res.arrayBuffer()));
  sourceNode.connect(audioCtx.destination);
  sourceNode.start(0);
});

recognition.onresult = (event) => {
  let finalText = '';
  let interimText = '';
  for (let i = event.resultIndex; i < event.results.length; i++) {
    const text = event.results[i][0].transcript;
    event.results[i].isFinal ? finalText += text : interimText += text;
  }
  console.log('最终识别结果:', finalText);
  console.log('临时识别结果:', interimText);
  resultEl.textContent = finalText;
};

recognition.onerror = (err) => {
  console.error('识别出错:', err.error);
  startBtn.disabled = false;
};

recognition.onend = () => {
  console.log('识别过程结束');
  startBtn.disabled = false;
};

// 页面加载时预准备音频流
prepareAudioStream();

关键注意事项 #

• 仅Chrome等基于Blink内核的浏览器支持webkitSpeechRecognition的stream非标准属性，其他浏览器需依赖云端STT服务
• WAV文件需符合要求：推荐16kHz采样率、单声道、PCM编码，否则可能导致识别失败
• 网站需运行在HTTPS环境（localhost除外），否则浏览器会限制音频API的使用

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