前言

现在语音识别技术得到了越来越广泛的应用，有的时候要在前端项目之中加入语音识别功能，也就是能识别并转义使用者说的话然后根据使用者说的话来触发某种操作。就比如开启语音助手之后说出“切换主题”，页面就会自动切换主题；说出“打开背景音乐”，就会自动播放网页的背景音乐等等。

本文的主要思路就是调用讯飞旗下的讯飞实时语音转写接口，并通过当前系统的麦克风读取用户说出的语音信息，并计算编码通过websocket实时发送到讯飞实时语音接口，并接收返回数据也就是根据语音数据转码后的中文字符串，然后根据识别出来的中文字符串来调用对应的操作。

讯飞实时语音转写接口API文档：

实时语音转写 API 文档 | 讯飞开放平台文档中心

该工程实现了对于讯飞实时语音转写api接口的一个简单封装，开发者只需要按照下面的方法来进行安装和传参就可以实现。而且该项目在React和Vue均可引入调用。

npm包github地址：

https://github.com/yinlingyun97/voicecore.git

一、安装语音核心

npm install voice-core

二、引入语音核心

1.可以通过import方式来进行引入：

import VoiceCore from 'voice-core';

2.或者通过require方式来引入：

const VoiceCore = require('voice-core');

三、调用语音核心

传参

调用时需要对引入的voiceCore进行实例化操作，对voiceCore实例化的过程中需要传入四个参数，分别为config, textData, appId, apiKey

1.config：

将语音助手启动，关闭和错误等的方法传入到语音核心实例中，当语音核心启动时，错误时，关闭时会自动调用传入的config中的对应方法。

示例：

let config = {// 语音核心关闭时调用的方法onClose: () => {console.log('发送结束标识');console.log('关闭连接ws.onclose');console.info('onClose');},// 语音核心出错时调用的方法,并且会将错误传出来onError: (err) => {console.info(err);},// 说话时的实时分贝值,e为Number值voiceValue:(e)=>{console.info(e)},// 语音核心匹配结果textResponse: (e) => {// 匹配成功时返回 { 'result':'识别结果','dsc':'匹配成功'}// 匹配失败时返回 { 'result':'识别结果','dsc':'无匹配数据'}console.info(e)},// 语音核心启动时调用的方法onStart: () => {console.info('onStart');},// 语音核心开始进行语音数据匹配时调用的方法startMatching:()=>{console.info('匹配语句中');}
};

注意voiceValue是接收到的实时的声音大小，最小为0，最大为100。所以当配置上这个方法的时候，周围声音有一点改变都会触发这个方法。

匹配成功时和匹配失败时控制台输出示例：

2.textData：

语音匹配列表，当识别到text中的语句的时候就会自动调用对应的方法，也就是对应的success方法。其中对于语句使用"|"来进行分隔表示“或”的概念。

当检测到对应的语句的时候会调用对应的success方法，而且会将匹配的textData项和其次序当做参数传入success。

请注意不要传入重复的语音指令，如果传入重复的那么会优先调用位置比较靠前的语音指令的success方法。所以在将textData传入voice-core的时候要进行一步数组去重的操作。

示例：

    let textData = [{id: 'end',text: '结束|关闭|注销',success: (item,index)=>{console.info(item,index)},},{id: 'start',text: '开始|启动|发动',success: (item,index)=>{console.info(item,index)},},];

3. appId&appKey

登录讯飞首页：讯飞开放平台-以语音交互为核心的人工智能开放平台

注册或登录之后选择实时语音转写服务：

然后按照提示或购买服务或免费试用。在该过程中按照提示创建一个新应用

试用或购买服务后点击实时语音转写会出现以下界面：

红框框出来的就是appId和appKey

调用实例

1.启动语音识别：

import VoiceCore from 'voice-core';
this.voice = new VoiceCore(config, textData, appId, apiKey);
this.voice.start();

2.关闭||停止语音识别

import VoiceCore from 'voice-core';
this.voice = new VoiceCore(config, textData, appId, apiKey);
this.voice.stop();

在React框架下的使用：

以React框架为例：

/*** @Description: voice-core 调用示例** @author: yinlingyun** @date: 2021/8/6*/
import React, {PureComponent} from 'react';
import styles from './index.less';
import VoiceCore from 'voice-core';class voiceCoreComponent extends PureComponent {constructor(props) {super(props);this.state = {};this.voice = null; // voiceCore实例化的存放地址}componentDidMount() {let config = {onClose: () => {console.log('发送结束标识');console.log('关闭连接ws.onclose');console.info('onClose');},onError: (data) => {console.log('关闭连接ws.onerror');console.info(data);},// 语音助手匹配结果textResponse: (e) => {// 匹配成功时返回 { 'result':'识别结果','dsc':'匹配成功'}// 匹配失败时返回 { 'result':'识别结果','dsc':'无匹配数据'}console.info(e)},onStart: () => {console.info('onStart');},};let textData = [{id: 'start',text: '结束|关闭|注销',success: this.success,},{id: 'end',text: '开始|启动|发动',success: this.success,},];let appId = '你的appId';let apiKey = '你的apiKey';this.voice = new VoiceCore(config, textData, appId, apiKey);}success = (item,index) => {console.info(index, 'success');if (item.id === 'end') {this.voice.stop();}};render() {return (<div><divonClick={() => {this.voice.start();}}>启动语音助手</div><divonClick={() => {this.voice.stop();}}>关闭语音助手</div></div>);}
}export default voiceCoreComponent;

实现效果：

红框内为识别结果

在VUE框架下的使用：

<template><div class="voiceAss" @click="voiceStateChange"><div class="img"><img :src="voiceState ? voiceOn : voiceOff" alt="" /></div><canvas class="canvas" id='canvas'></canvas></div>
</template><script>
import _ from 'lodash'
import VoiceCore from 'voice-core'
import voiceOn from './img/voiceOn.png'
import voiceOff from './img/voiceOff.png'
export default {name: 'VoiceAssistant',props: {list: {type: Array,default: () => []}},data () {return {voiceOn,voiceOff,voiceState: false,appId: '你的appId',apiKey: '你的apiKey',voice: null}},mounted () {},methods: {// 初始化语音核心voiceCoreInit (list) {const config = {onClose: () => {console.info('语音助手关闭成功')},onError: (err) => {console.info(err)},matchFailed: (e) => {console.info(e)},voiceValue: (e) => {const canvas = document.getElementById('canvas')if (canvas) {const canvasCtx = canvas.getContext('2d')canvasCtx.fillStyle = '#8FCE5E'canvasCtx.clearRect(0, 0, 300, 150)if (e > 1) {canvasCtx.fillRect(0, 0, 300, 75 + e * 0.75)}}},onStart: () => {console.info('语音助手开启成功')}}const textData = this.voiceCommandData(['打开', '切换', '转到', '开启'], list)this.voice = new VoiceCore(config, textData, this.appId, this.apiKey)},// 生成语音指令voiceCommandData (command, list) {if (!list || !Array.isArray(list)) {return null}const textData = [{id: 'exit',text: '结束|关闭|结束语音助手|关闭语音助手|退出',success: this.voiceSuccessCallback}]this.arraysFlatten(list).forEach((item) => {if (item.children.length < 1) {const text = command.map((val) => {if (item.name.indexOf('-') > -1) {let outText = _.cloneDeep(item.name)outText = outText.replace('-', '')outText = outText.replace('/', '')return val + outText}return val + item.name}).join('|')textData.push({id: item.value,text,success: this.voiceSuccessCallback,...item})}})return textData},// 语音匹配成功后调用方法voiceSuccessCallback (item) {if (item.id === 'exit' && this.voice) {this.voice.stop()this.voiceState = falsereturn}if (this.props.callback && typeof this.props.callback === 'function') {this.props.callback(item)}},// 数组扁平化方法arraysFlatten (list, parent) {let outputData = []list.forEach((item) => {if (item.children.length < 1) {outputData.push(parent? {...item,parentId: parent.id}: item)} else {outputData = outputData.concat(this.arraysFlatten(item.children, item))}})// 对输出数据进行内部去重return outputData},// 开关语音助手方法voiceStateChange () {if (!this.voice) {return}if (!this.voiceState) {this.voice.start()} else {this.voice.stop()}this.voiceState = !this.voiceState}},watch: {list: {handler (val, oldval) {this.voiceCoreInit(val)},immediate: true,deep: true}}
}
</script><style scoped lang="less">.voiceAss{width: 40px;height: 40px;top:2%;left: 2%;position: absolute;z-index: 99;.img{position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;z-index: 101;img{width: 100%;height: 100%;}}.canvas{position: absolute;background: #ffffff;border-radius: 50%;width: 40px;height: 40px;z-index: 100;transform: rotateX(180deg);}}
</style>

实现效果：

JavaScript实现语音助手核心代码相关推荐

java实现语音聊天_java 语音聊天核心代码
import java.io.*; import javax.sound.sampled.*; import java.net.*; class Playback implements Runnabl ...
贴近司机，感知生活：智能语音助手在滴滴车主端的设计与实践
桔妹导读:基于网约车司机的职业特性,帮助与指引司机在各类复杂的场景下更安全.便捷地完成工作,并尽可能疏导与减轻他们因长时间处于封闭环境下的心理压力,一直是滴滴发力的一个方向.但现有的一些途径,如规则展 ...
智能语音助手调研【简单可行方案及开源代码】
智能语音助手调研需求: 方案一:百度智能对话AI产品(3个) 方案二:阿里AI语音助手方案三:科大讯飞语音助手部署方式: 不收费版本: 集成方案简单可行方案及开源代码
android代码 IMEI,Android_Android中获取IMEI码的方法，核心代码:Imei = ((TelephonyManager) - phpStudy...
Android中获取IMEI码的方法核心代码:Imei = ((TelephonyManager) getSystemService(TELEPHONY_SERVICE)) .getDeviceId ...
SoundHound与本田合作，加速开发AI语音助手
文章来源:ATYUN AI平台会话智能技术的领先创新者SoundHound宣布与本田建立战略合作伙伴关系,以加速AI语音助手的发展. SoundHound的Houndify语音和会话AI平台具有独特 ...
打造Android的中文Siri语音助手
打造Android的中文Siri语音助手(一)--小I机器人的接口分类: android2011-12-02 14:10 7879人阅读评论(44) 收藏举报 androidstringpath ...
LWN：开源语音助手的希望！
关注了就能看到更多这么棒的文章哦- Hopes and promises for open-source voice assistants March 21, 2023 This article wa ...
微软语音文本到语音_建立自己的语音助手第1部分文本到语音
微软语音文本到语音 Disclaimer: we will not be training neural nets in this example but rather use pre-traine ...
springboot校园交友网站1.0（Springboot+Mybatis+thymeleaf+人脸识别+语音助手+百度地图）
文章目录涉及技术数据库设计前端搭建后端实现项目重点实现搜索栏(模糊查询) 首页发布请求遍历分类跳转项目难点接口调用(人脸识别+语音识别+百度地图API) 人脸识别语音识别百度地图 ...
基于语音交互技术的智能语音助手系统的设计与实现
文章目录 <基于语音交互技术的智能语音助手系统的设计与实现> 1. 引言 2. 技术原理及概念 2.1. 基本概念解释 2.2. 技术原理介绍:算法原理,操作步骤,数学公式等 2.2.1. ...

JavaScript实现语音助手核心代码

一、安装语音核心

二、引入语音核心

三、调用语音核心

传参

调用实例

在React框架下的使用：

实现效果：

在VUE框架下的使用：

实现效果：

JavaScript实现语音助手核心代码相关推荐

最新文章

热门文章