vue使用语音识别

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

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

声音捕捉：将声波转化为数字信号。

特征提取：分析声音中的关键特征。

声学模型：将声音特征与音素匹配。

语言模型：根据上下文理解词汇和句子。

文字输出：将识别结果转化为文字。
可以把语音转换的过程比作一个翻译员的工作：

麦克风是耳朵，负责听声音。

特征提取是翻译员的记笔记过程，记录下关键的发音。

声学模型是翻译员的词典，帮助理解每个发音对应的文字。

语言模型是翻译员的语法知识，确保翻译出来的句子是通顺的。

最后，翻译员将完整的句子写下来，呈现给你。

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

实例：

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>