调用浏览器Web Speech API实现vue2在textarea中语音输入转文字

<template>
  <div>
    <!-- 文本输入框，绑定 v-model 到 textarea 数据属性，最大输入长度为 10000 -->
    <textarea
      maxlength="10000"
      v-model="textarea"
      ref="questionTextarea"
    ></textarea>
    <!-- 语音输入的提示框 -->
    <el-tooltip
      slot="suffix"
      class="item"
      effect="light"
      :content="!isRecording ? '语音输入' : '停止语音输入'"
      placement="top-end"
    >
      <!-- 麦克风图标，根据是否录音添加不同样式 -->
      <i
        class="el-icon-microphone"
        :class="isRecording ? 'saying' : ''"
        @click="sayingInMessage"
      ></i>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 标记是否正在录音
      isRecording: false,
      // 存储语音转文字的结果
      transcript: "",
      // 存储 SpeechRecognition 实例
      recognition: null,
      // 文本框内容
      textarea: ""
    };
  },
  methods: {
    // 处理语音输入的开始和停止
    sayingInMessage() {
      // 切换录音状态
      this.isRecording = !this.isRecording;

      if (this.isRecording) {
        // 聚焦到文本框
        this.$refs.questionTextarea.focus();
        // 开始语音识别
        this.recognition.start();
      } else {
        // 聚焦到文本框
        this.$refs.questionTextarea.focus();
        // 停止语音识别
        this.recognition.stop();
      }
    }
  },
  mounted() {
    // 获取 SpeechRecognition 构造函数，兼容不同浏览器
    const SpeechRecognition =
      window.SpeechRecognition || window.webkitSpeechRecognition;

    if (SpeechRecognition) {
      // 创建 SpeechRecognition 实例
      this.recognition = new SpeechRecognition();
      // 设置识别语言为中文
      this.recognition.lang = "zh-CN";
      // 设置连续识别
      this.recognition.continuous = true;
      // 返回临时识别结果
      this.recognition.interimResults = true;
      // 获取更多可能的识别结果
      this.recognition.maxAlternatives = 3;

      // 记录最终的文本内容
      let finalText = "";
      // 记录临时文本内容
      let interimText = "";
      // 保存当前文本框内容
      let text = this.textarea;

      // 处理识别结果的回调函数
      this.recognition.onresult = (event) => {
        console.log('识别结果事件触发');
        // 重置临时文本
        interimText = "";
        for (let i = event.resultIndex; i < event.results.length; i++) {
          const result = event.results[i];
          console.log(`当前结果索引: ${i}, 是否为最终结果: ${result.isFinal}`);
          if (result.isFinal) {
            // 处理最终结果
            const transcript = result[0].transcript;
            console.log(`最终识别结果: ${transcript}`);
            finalText += transcript;
            this.textarea = finalText;
            console.log(`更新后的 textarea 内容 (最终结果): ${this.textarea}`);
          } else {
            // 处理临时结果
            const transcript = result[0].transcript;
            console.log(`临时识别结果: ${transcript}`);
            interimText = transcript;
            // 显示临时结果，临时结果覆盖之前的临时结果
            this.textarea = text + finalText + interimText;
            console.log(`更新后的 textarea 内容 (临时结果): ${this.textarea}`);
          }
        }
      };

      // 语音识别开始的回调函数
      this.recognition.onstart = () => {
        console.log('语音识别开始');
      };

      // 语音识别结束的回调函数
      this.recognition.onend = () => {
        console.log('语音识别结束');
      };

      // 语音识别出错的回调函数
      this.recognition.onerror = (event) => {
        console.error('语音识别出错:', event.error);
      };
    } else {
      // 浏览器不支持语音识别功能时，在控制台输出提示信息
      console.log("浏览器不支持语音识别功能");
    }
  }
};
</script>    

1.初始化状态

在data函数中初始化isRecording（表示是否正在录音）为false，transcript（存储语音转文字的结果）为空字符串，recognition（存储SpeechRecognition实例）为null。

2.绑定点击事件

通过@click指令将el-tooltip中的麦克风图标点击事件绑定到sayingInMessage方法上，该方法用于切换录音状态并相应地启动或停止语音识别。

3.检查浏览器支持

获取SpeechRecognition构造函数（兼容不同浏览器），如果浏览器支持语音识别功能（即SpeechRecognition存在），则继续下一步；否则，在控制台输出提示信息 “浏览器不支持语音识别功能”。

4.创建识别实例

创建SpeechRecognition实例并赋值给this.recognition，并设置相关属性，包括识别语言为中文（this.recognition.lang = "zh-CN"）、连续识别（this.recognition.continuous = true）、返回临时识别结果（this.recognition.interimResults = true）、获取更多可能的识别结果（this.recognition.maxAlternatives = 3）

5.定义相关变量

定义finalText（记录最终的文本内容）和interimText（记录临时文本内容）变量，并获取textarea的值赋值给text。

6.处理识别结果

通过this.recognition.onresult事件处理函数处理识别结果。如果是最终结果（result.isFinal为true），将结果添加到finalText中，并更新textarea内容；如果是临时结果（result.isFinal为false），更新interimText，并根据text、finalText和interimText更新textarea内容。

7.处理其他事件

this.recognition.onstart：在语音识别开始时触发，在控制台输出 “语音识别开始”。

this.recognition.onend：在语音识别结束时触发，在控制台输出 “语音识别结束”。

this.recognition.onerror：在语音识别出错时触发，在控制台输出错误信息。

8.启动和停止识别

在sayingInMessage方法中，根据isRecording的值决定是启动（this.recognition.start()）还是停止（this.recognition.stop()）语音识别，并将焦点设置到questionTextarea上。

9.注意事项

注意浏览器对麦克风权限管理

注意打开麦克风音量

若上线云服务器需要有备案域名，否则打不开浏览器麦克风权限，没有域名也可以用自签名证书，这里不多介绍