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

背景

在进行大模型的开发项目中,有很多会涉及到语音的识别及语音的播放,现按照 Web Speech api原生支持的是,实现实现此功能,此demo仅仅在科学上网的情况下,览器默认调用的语音识别服务有网络限制

实现语音的识别

js 复制代码
<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>

语音的识别及播放

js 复制代码
<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>

缺点

语音的识别需要 科学上网才可以,否则无法识别, 语音的播放是都可以的

相关推荐
yanlele4 分钟前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4539 分钟前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友13 分钟前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir14 分钟前
vue3.2 前端动态分页算法
前端·算法
烛阴1 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子1 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead1 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
Xiaouuuuua2 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
@Dream_Chaser2 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
深耕AI2 小时前
【教程】在ubuntu安装Edge浏览器
前端·edge