vue移动端使用科大讯飞的语音识别(语音听写)

最新推荐文章于 2024-06-20 11:13:41 发布

王三花

最新推荐文章于 2024-06-20 11:13:41 发布

阅读量3.6k

点赞数 3

分类专栏：移动端文章标签：语音识别 vue.js

本文链接：https://blog.csdn.net/CN_wangsanhua/article/details/120497946

版权

移动端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

博主在项目临近测试时发现遗忘的语音转文字功能，经过6小时的尝试和挣扎，最终通过采用科大讯飞的voice-input-button2插件解决了问题。该插件简单易用，通过npm安装并在main.js中配置appid、apikey和apiSecret即可。在页面中直接使用提供的组件和方法，实现了语音识别。注意要在科大讯飞官网注册获取相关key。

摘要由CSDN通过智能技术生成

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', // 您申请的语音听写服务应用的ID
  apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxx', // 您开通的语音听写服务的 apiKey
  apiSecret: 'xxxxxxxxxxxxxxxxxxxxx', // 您开通的语音听写服务的 apiSecret
  color: '#fff', // 按钮图标的颜色
  tipPosition: 'top', // 提示条位置
})
// 这里是直接全局注册了，在想要使用的页面中直接使用下面html的代码和methods的代码就可以了

这里要注意api的顺序

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