[人工智能]vue移动端使用科大讯飞的语音识别(语音听写)

tips:

项目中碰到一个需求，用户语音转文字，在提测的前一天，突然想起来自己一直把这个功能搁置着，急得不可开交，从下午两点到8点，一直没弄出来，找到的文档有说语音识别功能必须用webpack4.0以上，又走歪路去把项目配置从3.6转到4.+又导致配置炸裂------我心情也直接炸裂

有幸被朋友告知了一个封装好的科大讯飞的插件

voice-input-button2

真的很好使很好使

npm i voice-input-button2 -save -dev

在main.js中引入

import voiceInputButton from 'voice-input-button2'

Vue.use(voiceInputButton, {
  appId: 'xxx', // 您申请的语音听写服务应用的ID
  apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxx', // 您开通的语音听写服务的 apiKey
  apiSecret: 'xxxxxxxxxxxxxxxxxxxxx', // 您开通的语音听写服务的 apiSecret
  color: '#fff', // 按钮图标的颜色
  tipPosition: 'top', // 提示条位置
})

这里要注意api的顺序

<voice-input-button
      v-model="result"
      @record="showResult"
      @record-start="recordStart"
      @record-stop="recordStop"
      @record-blank="recordNoResult"
      @record-failed="recordFailed"
      @record-ready="recordReady"
      @record-complete="recordComplete"
      interactiveMode="touch"
      color="#fff"
      tipPosition="top"
    >
      <template slot="no-speak">没听清您说的什么</template>
    </voice-input-button>

### methods方法中
// 录音
    recordReady() {
      console.info("按钮就绪!");
    },
    recordStart() {
      console.info("录音开始");
    },
    showResult(text) {
      console.info("收到识别结果：", text);
    },
    recordStop() {
      console.info("录音结束");
    },
    recordNoResult() {
      console.info("没有录到什么，请重试");
    },
    recordComplete(text) {
      console.info("识别完成! 最终结果：", text);
    },
    recordFailed(error) {
      console.info("识别失败，错误栈：", error);
    },