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

使用的是封装好的插件:voice-input-button2

真的很好使很好使
1、先使用npm下载插件

npm i voice-input-button2 -save -dev

2、在main.js中引入

import voiceInputButton from 'voice-input-button2'

3、全局引入

Vue.use(voiceInputButton, {

appId: 'xxx', // 您申请的语音听写服务应用的ID

apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxx', // 您开通的语音听写服务的 apiKey

apiSecret: 'xxxxxxxxxxxxxxxxxxxxx', // 您开通的语音听写服务的 apiSecret

color: '#fff', // 按钮图标的颜色

tipPosition: 'top', // 提示条位置

})

// 这里是直接全局注册了,在想要使用的页面中直接使用下面html的代码和methods的代码就可以了

4、使用组件

<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>

5、在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);

},

遇到的问题:

1、浏览器不支持getUserMedia。使用js-audio-recorder报浏览器不支持getUserMedia_js-audio-recorder兼容性-CSDN博客

其实这是因为浏览器不支持http:IP开头的路径,认为这个路径不安全

浏览器只支持file:,https:,http://localhost,

2、在安卓手机app里面运行语言功能,识别不了,是因为没有权限,需要webview支持

WebSocket才可以,可以用腾讯内核X5组件代替。

相关推荐
DN金猿3 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子4 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远6616 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_29 分钟前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue1 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
vvilkim1 小时前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架
장숙혜1 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang1 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet