vue移动端使用语音识别

在项目中需要实现语音转文字功能，使用了科大讯飞的插件voice-input-button2，记录一下。
先使用npm下载插件

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', // 提示条位置
})
// 这里是直接全局注册了，在想要使用的页面中直接使用下面html的代码和methods的代码就可以了

在你需要使用的Vue页面中

#### html
<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);
    },

遇到问题
再移动端使用中遇到了无法获取录音权限的问题
解决方法：
使用了js-audio-recorder插件

cnpm i js-audio-recorder --s

在需要使用的页面中

import Recorder from 'js-audio-recorder'


created(){
    Recorder.getPermission().then(() => {
        console.log('录音给权限了');
      }, (error) => {
        console.log(`${error.name} : ${error.message}`);
      });
  },