tips:

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

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

voice-input-button2

真的很好使很好使

先使用npm下载插件

npm i voice-input-button2 -save -dev

在main.js中引入

import voiceInputButton from 'voice-input-button2'

Vue.use(voiceInputButton, {appId: 'xxx', // 您申请的语音听写服务应用的IDapiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxx', // 您开通的语音听写服务的 apiKeyapiSecret: 'xxxxxxxxxxxxxxxxxxxxx', // 您开通的语音听写服务的 apiSecretcolor: '#fff', // 按钮图标的颜色tipPosition: 'top', // 提示条位置})// 这里是直接全局注册了，在想要使用的页面中直接使用下面html的代码和methods的代码就可以了

这里要注意api的顺序

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

当然所有的前提都是你已经在科大讯飞的官网注册好了那些apikey了哦~ 官网中有详细的注册步骤文档

傻瓜式文档，你值得拥有 -----科大讯飞(٩( ´︶)( ´︶)۶)