vue使用语音识别

vue使用语音识别

使用 Web Speech API 实现语音识别功能

语音转换的原理可以简单概括为以下几个步骤:

  1. 声音捕捉:将声波转化为数字信号。
  2. 特征提取:分析声音中的关键特征。
  3. 声学模型:将声音特征与音素匹配。
  4. 语言模型:根据上下文理解词汇和句子。
  5. 文字输出:将识别结果转化为文字。
    可以把语音转换的过程比作一个翻译员的工作:
  • 麦克风是耳朵,负责听声音。
  • 特征提取是翻译员的记笔记过程,记录下关键的发音。
  • 声学模型是翻译员的词典,帮助理解每个发音对应的文字。
  • 语言模型是翻译员的语法知识,确保翻译出来的句子是通顺的。
  • 最后,翻译员将完整的句子写下来,呈现给你。

下面的示例包括一个简单的界面,用户可以点击按钮开始和停止语音识别,并在页面上显示识别结果。

实例:

src/components 目录下创建一个新的组件文件 speech.vue

vue 复制代码
<template>
  <div>
    <button @click="startRecognition">开始识别</button>
    <button @click="stopRecognition">停止识别</button>
    <p>识别结果: {{ transcript }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recognition: null,
      transcript: "", // 用于存储最终结果
      interimTranscript: "", // 用于存储临时结果
    };
  },
  methods: {
    startRecognition() {
      if (!("webkitSpeechRecognition" in window)) {
        alert("您的浏览器不支持语音识别,请使用 Chrome 浏览器。");
        return;
      }

      this.recognition = new webkitSpeechRecognition();
      this.recognition.continuous = true; // 设置为连续识别
      this.recognition.interimResults = true; // 返回临时结果
      this.recognition.lang = "zh-CN"; // 设置语言为中文

      this.recognition.onstart = () => {
        console.log("语音识别已启动");
      };

      this.recognition.onresult = (event) => {
          console.log(event);
        let finalTranscript = ""; // 用于存储最终结果
        this.interimTranscript = ""; // 清空临时结果

        for (let i = event.resultIndex; i < event.results.length; ++i) {
          if (event.results[i].isFinal) {
            // 如果是最终结果,追加到 finalTranscript
            finalTranscript += event.results[i][0].transcript;
          } else {
            // 如果是临时结果,存储到 interimTranscript
            this.interimTranscript += event.results[i][0].transcript;
          }
        }

        // 将最终结果追加到 transcript 中
        this.transcript += finalTranscript;
        console.log("临时结果:", this.interimTranscript);
      };

      this.recognition.onerror = (event) => {
        console.error("语音识别错误", event);
      };

      this.recognition.onend = () => {
        console.log("语音识别服务已断开");
      };

      this.recognition.start();
    },
    stopRecognition() {
      if (this.recognition) {
        this.recognition.stop();
      }
    },
  },
};
</script>

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

src/App.vue 中引入并使用 speech 组件:

vue 复制代码
<template>
  <div id="app">
    <speech />
  </div>
</template>

<script>
import speech from './components/`speech.vue';

export default {
  name: 'App',
  components: {
    speech,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
相关推荐
excel10 分钟前
JavaScript 中 WeakMap、WeakSet、Set、Map、Object、Array 的区别与应用场景
前端
Blossom.11831 分钟前
基于深度学习的医学图像分析:使用CycleGAN实现图像到图像的转换
人工智能·深度学习·目标检测·机器学习·分类·数据挖掘·语音识别
haaaaaaarry1 小时前
Element Plus常见基础组件(一)
java·前端·javascript·vue.js
qingyingWin1 小时前
原生微信小程序研发,如何对图片进行统一管理?
前端·微信小程序
不懂英语的程序猿1 小时前
【JEECG】JVxeTable表格拖拽排序功能
前端·后端
拾光拾趣录1 小时前
前端灵魂拷问:从URL到Redux,17个常见问题
前端·面试
萌萌哒草头将军1 小时前
Prisma ORM 又双叒叕发布新版本了!🚀🚀🚀
前端·javascript·node.js
mldong2 小时前
推荐一款超高颜值的后台管理模板!Art-Design-Pro!开源!免费!
前端·vue.js·架构
草字2 小时前
uniapp 如果进入页面输入框自动聚焦,此时快速返回页面或者跳转到下一个页面,输入法顶上来的页面出现半屏的黑屏问题。
java·前端·uni-app
程序视点2 小时前
Wise Duplicate Finder 重复文件查找工具 - 永久免费专业版文件去重工具
前端·windows