语音识别文字

记录项目中的语音识别文字功能是怎么做的，有需要的可以借鉴一下，都是干货，简单实用。

实现原理：调用浏览器的API监听用户语音，浏览器监听到语音后，就会转成文字。

测试环境：Edge--免费(国内可用)   Safari--免费(国内可用)  Chorme--免费(需要科学上网)  FireFox--不支持

下面是代码函数干货：

注意我用的vue2写的，所以有一些语音展示的动画控制按钮和文本显示的代码。复制代码后，根据你的需求更改，然后直接调用函数即可

audioCHangeWord() { 
      this.AudioMsg=true //显示语音动画
      const that = this;
      that.context = "";
      // 创建SpeechRecognition对象
      // eslint-disable-next-line no-undef
      var recognition = new webkitSpeechRecognition()
      // console.log("recognition1", recognition);
      if (!recognition) { 
        // eslint-disable-next-line no-undef
        recognition = new SpeechRecognition();
      }
      // console.log("实例", recognition);
      // 设置语言
      recognition.lang = 'zh-CN';
      // 开始语音识别
      recognition.start();
      that.isListening = true;
      // 监听识别结果
      recognition.onresult = function (event) {
        console.log("监听结束--------");
        var result = event.results[0][0].transcript;
        console.log("监听结果:", result);
        that.AudioMsg=false//关闭语音动画
        that.context = result;//识别到的文本
      };

      // 监听错误事件
      recognition.onerror = function (event) {
        that.isListening = false;
        that.AudioMsg=false//关闭语音动画
        console.error(event.error);
      };
      // 监听结束事件（包括识别成功、识别错误和用户停止）
      recognition.onend = function () {
        that.isListening = false;
        that.AudioMsg=false
        console.log("语音识别停止");
      };
    },