Web Speech API 实现语音的识别和播放

0背景：大模型项目的语音识别与播放

在进行大模型的开发项目中，有很多会涉及到语音的识别及语音的播放。现按照 Web Speech API 原生支持的能力，实现此功能。

文章后会放源码：对接科大讯飞的版本。

1实现语音的识别（基础版）

<template>
  <div>
    <button @click="startRecognition" :disabled="isListening">开始录音</button>
    <button @click="stopRecognition" :disabled="!isListening">停止</button>
    <p>识别结果: {{ recognitionText }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isListening = ref(false);
const recognitionText = ref('');
let recognition;

const startRecognition = () => {
  // 检查浏览器是否支持
  if (!('webkitSpeechRecognition' in window)) {
    alert('您的浏览器不支持语音识别');
    return;
  }

  recognition = new window.webkitSpeechRecognition();
  recognition.continuous = true;     // 连续识别
  recognition.interimResults = true; // 返回中间结果
  recognition.lang = 'zh-CN';        // 设置为中文

  recognition.onstart = () => {
    isListening.value = true;
  };

  recognition.onresult = (event) => {
    let interimTranscript = '';
    let finalTranscript = '';

    for (let i = event.resultIndex; i < event.results.length; i++) {
      const transcript = event.results[i][0].transcript;
      if (event.results[i].isFinal) {
        finalTranscript += transcript;      // 最终结果
      } else {
        interimTranscript += transcript;    // 临时结果
      }
    }

    recognitionText.value = finalTranscript || interimTranscript;
  };

  recognition.onerror = (event) => {
    console.error('语音识别错误:', event.error);
    isListening.value = false;
  };

  recognition.onend = () => {
    isListening.value = false;
  };

  recognition.start();
};

const stopRecognition = () => {
  if (recognition) {
    recognition.stop();
  }
};
</script>

2语音的识别及播放（合成版）

在识别的基础上，加入 speechSynthesis + SpeechSynthesisUtterance 实现"识别 → 文字 → 语音播放"闭环：

<template>
  <div>
    <button @click="startRecognition">开始语音识别</button>
    <button @click="stopRecognition">停止语音识别</button>
    <button @click="speakText">播放文字语音</button>
    <textarea v-model="recognizedText" rows="4" cols="50" placeholder="识别结果将显示在这里"></textarea>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const recognizedText = ref('');
const recognition = ref(null);
const synth = ref(window.speechSynthesis);

// 初始化语音识别
const initRecognition = () => {
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  recognition.value = new SpeechRecognition();
  recognition.value.lang = 'zh-CN';

  recognition.value.onresult = (event) => {
    const transcript = event.results[0][0].transcript;
    recognizedText.value = transcript;
  };

  recognition.value.onerror = (event) => {
    console.error('语音识别出错:', event.error);
  };
};

// 开始语音识别
const startRecognition = () => {
  if (!recognition.value) {
    initRecognition();
  }
  recognition.value.start();
};

// 停止语音识别
const stopRecognition = () => {
  if (recognition.value) {
    recognition.value.stop();
  }
};

// 播放文字语音
const speakText = () => {
  if (recognizedText.value) {
    const utterance = new SpeechSynthesisUtterance(recognizedText.value);
    utterance.lang = 'zh-CN';
    synth.value.speak(utterance);
  }
};
</script>

<style scoped>
button {
  margin: 5px;
}
</style>

3缺点 & 对接第三方

3.1 缺点

• 语音的识别需要科学上网才可以，否则无法识别；
• 语音的播放是都可以的（speechSynthesis 本地合成，无网络依赖）。

3.2 对接第三方

国内访问可以对接百度、星火、阿里云的语音服务。作者这边对接的是科大讯飞的，感兴趣的可以注册一下科大讯飞的语音服务（demo 地址见原文）。

4术语表 & 附录：完整代码

术语表

附录 A：最小可运行骨架

<script setup>
import { ref } from 'vue';

const recognizedText = ref('');
const recognition = ref(null);
const synth = ref(window.speechSynthesis);

const initRecognition = () => {
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  recognition.value = new SpeechRecognition();
  recognition.value.lang = 'zh-CN';
  recognition.value.onresult = (event) => {
    recognizedText.value = event.results[0][0].transcript;
  };
  recognition.value.onerror = (event) => console.error(event.error);
};

const startRecognition = () => {
  if (!recognition.value) initRecognition();
  recognition.value.start();
};

const stopRecognition = () => recognition.value?.stop();

const speakText = () => {
  if (recognizedText.value) {
    const utterance = new SpeechSynthesisUtterance(recognizedText.value);
    utterance.lang = 'zh-CN';
    synth.value.speak(utterance);
  }
};
</script>

<template>
  <div>
    <button @click="startRecognition">开始语音识别</button>
    <button @click="stopRecognition">停止语音识别</button>
    <button @click="speakText">播放文字语音</button>
    <textarea v-model="recognizedText" rows="4" cols="50" placeholder="识别结果将显示在这里"></textarea>
  </div>
</template>