前言
最近在实现智能问答机器人需求,需要调用讯飞的语音听写api。谨以此篇文章分享记录一下。
主要技术
前端:react 后台:java 此篇文章关注前端实现 外部api:科大讯飞语音听写(流式版)
需求场景
用户可以选择输入框输入或者点击语音图标,发起语音识别,识别完成之后,发送问题到输入框。
根据用户问题,调用后台接口,后台在业务上设置了三种答案返回模式。
这里我们先不关心,我们只关心如何发起语音识别以及前端代码实现最终效果。
效果预览
涉及公司未发布产品,暂不展示。界面也很简单,就是你问我答,类似小度机器人,
然后语音输入,点击语音输入图标,出来一个模态框,此处用户展示语音识别结果以及等待。
识别结束后,发送消息到聊天框中。
准备工作
讯飞开放平台:https://www.xfyun.cn/
注册账号,实名认证(需要身份信息)
进入控制台,按照开发文档流程,建立自己的应用,选择语音听写流式版。这里可以免费使用,不过有次数限制。
在文档中心,开发者新手指南中,有详细的介绍信息以及步骤。
开发文档提供了相应的demo,点进去,可以看到多种语音实现的案例代码,可以直接下载,安装依赖并运行。
这里我选择js语言。
正式开发
前端使用react-hook实现,首先我们在component组件中新建文件夹,如图所示:
在index.js中进行我们聊天组件的编写,请看代码:import React, {Fragment, useEffect , useState, useRef, useCallback } from 'react'; // hooks
import { Input, Button, message } from 'antd';
import InfiniteScroll from "react-infinite-scroll-component";
import robotpic from '../../images/robot.png';
import IatRecorder from '../../../utils/IatRecorder'; // 语音听写封装构造函数
import robotgif from '../../images/rob.gif';
import { getHistoryList } from '../../server/index'; //加载聊天历史请求
import './index.scss';
import style from '../../style/global.scss'
可以看到index.js文件中所有引入的模块,其中infinitescroll组件是一个支持下拉刷新和上拉加载的react组件,可以进入其npm包界面进行使用方法查看,在这个案例中,主要利用它实现下拉加载更多历史记录。 下面是ChartRoom 组件js部分:
const scrollList = useRef(); // 滚动容器
let [value, setValue] = useState(''); // 输入框值
let [hasMore, setHasmore] = useState(true); // 是否还存在下一级历史记录
let [queue, setQueue] = useState([
{
content: '我是智能机器人,有什么想问的可以手动输入或者语音识别哦!',
role: 'robot',
recommendQuestions: [
"怎么赚钱",
"怎么成为富翁",
"怎么成为人生赢家",
"关于提升自我"
]
}
]); // 聊天消息队列
let [audioStatus, setAudioStatus] = useState(0); // 控制语音状态
let [audioTxt, setAudioTxt] = useState(''); // 控制语音识别结果
let [isScroll, setIsScroll] = useState(false); // 聊天框随着消息内容增加是否滚动标致
// 这里设置使得每次最新的消息都出现在最底层,旧的消息向上滚动
useEffect(() => {
if (isScroll) {
scrollList.current.el.scrollTop = scrollList.current.el.scrollHeight;
}
}, [queue])
// 回车输入
const onPressEnter = (e) => {
if (value == '') {
return;
}
queue = queue.concat({
content: value,
role: 'user'
})
setQueue(queue);
setIsScroll(true);
setValue('')
}
// 输入框改变
const handleChange = (e) => {
setValue(e.target.value)
}
// 点击发送
const handleClick = () => {
if (value == '') {
return;
}
onPressEnter()
}
// 下拉加载更多历史
const fetchMoreData = () => {
if (!hasMore) {
return
}
getHistoryList().then(res => {
console.log(res,'res')
let { list,hasNext } = res.data.data,arr = [];
if( res.data.retCode == '0000' && list && list.length>0 ) {
list.map(item => {
arr.push({
role: 'user',
content: item.question
})
arr.push({
role: 'robot',
content: item.answer
})
})
let result = [].concat(arr).concat(queue);
setHasmore(hasNext);
setIsScroll(false);
setQueue(result)
}
})
}
// 选择推荐问题
const chooseQuestion = (e) => {
let qs = {
role: 'user',
content: e.target.dataset.content
}
queue = queue.concat(qs);
queue = queue.concat({
role: 'robot',
content: '没有答案呢'
})
setQueue(queue);
setIsScroll(true);
}
// 开始录音
const beginAudio = () => {
// 初始化语音录制
let iatRecorder = new IatRecorder();
// 开始
iatRecorder.start();
// 录音支持一分钟
let countInterval
// 状态改变时触发
iatRecorder.onWillStatusChange = function(oldStatus, status) {
let senconds = 0;
if (status === 'ing') {
setAudioStatus(1);
// 倒计时相关
countInterval = setInterval(() => {
senconds++
if (senconds >= 60) {
this.stop()
clearInterval(countInterval)
}
}, 1000)
} else if (status === 'init') {
} else {
console.log(status,'status')
// 语音结束,发送结果
if(audioTxt == '') {
message.warn('没识别到您的问题,请重试')
setAudioStatus(0);
return;
}
let result = '';
if(audioTxt.toLocaleLowerCase().indexOf('over') >0) {
result = audioTxt.replace(/over/,"?")
} else {
result = audioTxt
}
let question = {
role: 'user',
content: result
}
queue = queue.concat(question)
setQueue(queue);
setIsScroll(true);
setAudioStatus(0);
setAudioTxt('');
message.warn('语音录制结束')
clearInterval(countInterval)
}
}
// 监听识别结果的变化
iatRecorder.onTextChange = function(text) {
if(text !== '') {
setAudioTxt(text);
if(audioTxt.toLocaleLowerCase().indexOf('over') >0) {
this.stop()
}
}
}
}
// 结束录音
const stopAudio = () => {
setAudioStatus(0)
}
代码一目了然,接下来我们看看语音识别构造函数,在此之前,我们需要知道的是,连接语音api最重要的一步,是根据你身份认证之后的APPID, API_SECRET, API_KEY字段来生成websocket url,可以在开发文档中找到生成规则,这里直接使用demo提供的就可。
import CryptoJS from 'crypto-js';
//APPID,APISecret,APIKey在控制台-我的应用-语音听写(流式版)页面获取
const APPID = 'xxxxx'
const API_SECRET = 'xxxxxx'
const API_KEY = 'xxxxxxxxxx'
/**
* 获取websocket url
* 该接口需要后端提供,这里为了方便前端处理
*/
export function getWebSocketUrl() {
return new Promise((resolve, reject) => {
// 请求地址根据语种不同变化
var url = 'wss://iat-api.xfyun.cn/v2/iat'
var host = 'iat-api.xfyun.cn'
var apiKey = API_KEY
var apiSecret = API_SECRET
var date = new Date().toGMTString()
var algorithm = 'hmac-sha256'
var headers = 'host date request-line'
var signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/iat HTTP/1.1`
var signatureSha = CryptoJS.HmacSHA256(signatureOrigin, apiSecret)
var signature = CryptoJS.enc.Base64.stringify(signatureSha)
var authorizationOrigin = `api_key="${apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`
var authorization = btoa(authorizationOrigin)
url = `${url}?authorization=${authorization}&date=${date}&host=${host}`
resolve(url)
})
}
还有一个重要的方法,就是将语音转化成正确格式的方法 transcode.worker.js
(function(){
let self = this;
self.onmessage = function(e){
transAudioData.transcode(e.data)
}
let transAudioData = {
transcode(audioData) {
let output = transAudioData.to16kHz(audioData)
output = transAudioData.to16BitPCM(output)
output = Array.from(new Uint8Array(output.buffer))
self.postMessage(output)
// return output
},
to16kHz(audioData) {
var data = new Float32Array(audioData)
var fitCount = Math.round(data.length * (16000 / 44100))
var newData = new Float32Array(fitCount)
var springFactor = (data.length - 1) / (fitCount - 1)
newData[0] = data[0]
for (let i = 1; i < fitCount - 1; i++) {
var tmp = i * springFactor
var before = Math.floor(tmp).toFixed()
var after = Math.ceil(tmp).toFixed()
var atPoint = tmp - before
newData[i] = data[before] + (data[after] - data[before]) * atPoint
}
newData[fitCount - 1] = data[data.length - 1]
return newData
},
to16BitPCM(input) {
var dataLength = input.length * (16 / 8)
var dataBuffer = new ArrayBuffer(dataLength)
var dataView = new DataView(dataBuffer)
var offset = 0
for (var i = 0; i < input.length; i++, offset += 2) {
var s = Math.max(-1, Math.min(1, input[i]))
dataView.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true)
}
return dataView
},
}
})()
iatRecorder.js
import TransWorker from '../work/common/transcode.worker'
import { getWebSocketUrl } from '../utils/getSocketUrl'
//APPID,APISecret,APIKey在控制台-我的应用-语音听写(流式版)页面获取
const APPID = 'xxxx'
const API_SECRET = 'xxxxx'
const API_KEY = 'xxxxx'
let transWorker = new TransWorker()
export default class IatRecorder {
constructor({ language, accent, appId, dwa,vad_eos } = {}) {
let self = this
this.status = 'null'
this.language = language || 'zh_cn'
this.vad_eos = vad_eos || 1000
this.accent = accent || 'mandarin'
this.dwa = dwa || 'wpgs'
this.appId = appId || APPID
// 记录音频数据
this.audioData = []
// 记录听写结果
this.resultText = ''
// wpgs下的听写结果需要中间状态辅助记录
this.resultTextTemp = ''
transWorker.onmessage = function (event) {
self.audioData.push(...event.data)
}
}
// 修改录音听写状态
setStatus(status) {
this.onWillStatusChange && this.status !== status && this.onWillStatusChange(this.status, status)
this.status = status
}
setResultText({ resultText, resultTextTemp } = {}) {
this.onTextChange && this.onTextChange(resultTextTemp || resultText || '')
resultText !== undefined && (this.resultText = resultText)
resultTextTemp !== undefined && (this.resultTextTemp = resultTextTemp)
}
// 修改听写参数
setParams({ language, accent } = {}) {
language && (this.language = language)
accent && (this.accent = accent)
}
// 连接websocket
connectWebSocket() {
return getWebSocketUrl().then(url => {
let iatWS
if ('WebSocket' in window) {
iatWS = new WebSocket(url)
} else if ('MozWebSocket' in window) {
iatWS = new MozWebSocket(url)
} else {
alert('浏览器不支持WebSocket')
return
}
this.webSocket = iatWS
this.setStatus('init')
iatWS.onopen = e => {
this.setStatus('ing')
// 重新开始录音
setTimeout(() => {
this.webSocketSend()
}, 500)
}
iatWS.onmessage = e => {
this.result(e.data)
}
iatWS.onerror = e => {
this.recorderStop()
}
iatWS.onclose = e => {
this.recorderStop()
}
})
}
// 初始化浏览器录音
recorderInit() {
navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia
// 创建音频环境
try {
this.audioContext = new (window.AudioContext || window.webkitAudioContext)()
this.audioContext.resume()
if (!this.audioContext) {
alert('浏览器不支持webAudioApi相关接口')
return
}
} catch (e) {
if (!this.audioContext) {
alert('浏览器不支持webAudioApi相关接口')
return
}
}
// 获取浏览器录音权限
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices
.getUserMedia({
audio: true,
video: false,
})
.then(stream => {
getMediaSuccess(stream)
})
.catch(e => {
getMediaFail(e)
})
} else if (navigator.getUserMedia) {
navigator.getUserMedia(
{
audio: true,
video: false,
},
stream => {
getMediaSuccess(stream)
},
function(e) {
getMediaFail(e)
}
)
} else {
if (navigator.userAgent.toLowerCase().match(/chrome/) && location.origin.indexOf('https://') < 0) {
alert('chrome下获取浏览器录音功能,因为安全性问题,需要在localhost或127.0.0.1或https下才能获取权限')
} else {
alert('无法获取浏览器录音功能,请升级浏览器或使用chrome')
}
this.audioContext && this.audioContext.close()
return
}
// 获取浏览器录音权限成功的回调
let getMediaSuccess = stream => {
console.log('getMediaSuccess')
// 创建一个用于通过JavaScript直接处理音频
this.scriptProcessor = this.audioContext.createScriptProcessor(0, 1, 1)
this.scriptProcessor.onaudioprocess = e => {
// 去处理音频数据
if (this.status === 'ing') {
transWorker.postMessage(e.inputBuffer.getChannelData(0))
}
}
// 创建一个新的MediaStreamAudioSourceNode 对象,使来自MediaStream的音频可以被播放和操作
this.mediaSource = this.audioContext.createMediaStreamSource(stream)
// 连接
this.mediaSource.connect(this.scriptProcessor)
this.scriptProcessor.connect(this.audioContext.destination)
this.connectWebSocket()
}
let getMediaFail = (e) => {
alert('请求麦克风失败')
console.log(e)
this.audioContext && this.audioContext.close()
this.audioContext = undefined
// 关闭websocket
if (this.webSocket && this.webSocket.readyState === 1) {
this.webSocket.close()
}
}
}
recorderStart() {
if (!this.audioContext) {
this.recorderInit()
} else {
this.audioContext.resume()
this.connectWebSocket()
}
}
// 暂停录音
recorderStop() {
// safari下suspend后再次resume录音内容将是空白,设置safari下不做suspend
if (!(/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgen))){
this.audioContext && this.audioContext.suspend()
}
this.setStatus('end')
}
// 处理音频数据
// transAudioData(audioData) {
// audioData = transAudioData.transaction(audioData)
// this.audioData.push(...audioData)
// }
// 对处理后的音频数据进行base64编码,
toBase64(buffer) {
var binary = ''
var bytes = new Uint8Array(buffer)
var len = bytes.byteLength
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i])
}
return window.btoa(binary)
}
// 向webSocket发送数据
webSocketSend() {
if (this.webSocket.readyState !== 1) {
return
}
let audioData = this.audioData.splice(0, 1280)
var params = {
common: {
app_id: this.appId,
},
business: {
language: this.language, //小语种可在控制台--语音听写(流式)--方言/语种处添加试用
domain: 'iat',
accent: this.accent, //中文方言可在控制台--语音听写(流式)--方言/语种处添加试用
vad_eos: 5000,
dwa: 'wpgs', //为使该功能生效,需到控制台开通动态修正功能(该功能免费)
},
data: {
status: 0,
format: 'audio/L16;rate=16000',
encoding: 'raw',
audio: this.toBase64(audioData),
},
}
this.webSocket.send(JSON.stringify(params))
this.handlerInterval = setInterval(() => {
// websocket未连接
if (this.webSocket.readyState !== 1) {
this.audioData = []
clearInterval(this.handlerInterval)
return
}
if (this.audioData.length === 0) {
if (this.status === 'end') {
this.webSocket.send(
JSON.stringify({
data: {
status: 2,
format: 'audio/L16;rate=16000',
encoding: 'raw',
audio: '',
},
})
)
this.audioData = []
clearInterval(this.handlerInterval)
}
return false
}
audioData = this.audioData.splice(0, 1280)
// 中间帧
this.webSocket.send(
JSON.stringify({
data: {
status: 1,
format: 'audio/L16;rate=16000',
encoding: 'raw',
audio: this.toBase64(audioData),
},
})
)
}, 40)
}
result(resultData) {
// 识别结束
let jsonData = JSON.parse(resultData)
if (jsonData.data && jsonData.data.result) {
let data = jsonData.data.result
let str = ''
let resultStr = ''
let ws = data.ws
for (let i = 0; i < ws.length; i++) {
str = str + ws[i].cw[0].w
}
// 开启wpgs会有此字段(前提:在控制台开通动态修正功能)
// 取值为 "apd"时表示该片结果是追加到前面的最终结果;取值为"rpl" 时表示替换前面的部分结果,替换范围为rg字段
if (data.pgs) {
if (data.pgs === 'apd') {
// 将resultTextTemp同步给resultText
this.setResultText({
resultText: this.resultTextTemp,
})
}
// 将结果存储在resultTextTemp中
this.setResultText({
resultTextTemp: this.resultText + str,
})
} else {
this.setResultText({
resultText: this.resultText + str,
})
}
}
if (jsonData.code === 0 && jsonData.data.status === 2) {
this.webSocket.close()
}
if (jsonData.code !== 0) {
this.webSocket.close()
console.log(`${jsonData.code}:${jsonData.message}`)
}
}
start() {
this.recorderStart()
this.setResultText({ resultText: '', resultTextTemp: '' })
}
stop() {
this.recorderStop()
}
}
有一些语种,方言,动态修正,语音识别结束时间等等都是通过配置实现的,需要在控制台开通相应的功能,再在该函数中配置相关参数方可成效。有不懂的地方,欢迎留言。