微信小程序通過websocket實時語音識別的實現(xiàn)代碼
之前在研究百度的實時語音識別,并應(yīng)用到了微信小程序中,寫篇文章分享一下。
先看看完成的效果吧

前置條件
申請百度實時語音識別key 百度AI接入指南
創(chuàng)建小程序
設(shè)置小程序錄音參數(shù)
在index.js中輸入
const recorderManager = wx.getRecorderManager()
const recorderConfig = {
duration: 600000,
frameSize: 5, //指定當(dāng)錄音大小達到5KB時觸發(fā)onFrameRecorded
format: 'PCM',
//文檔中沒寫這個參數(shù)也可以觸發(fā)onFrameRecorded的回調(diào),不過樓主親測可以使用
sampleRate: 16000,
encodeBitRate: 96000,
numberOfChannels: 1
}
使用websocket連接
linkSocket() {
let _this = this
//這里的sn是百度實時語音用于排查日志,這里我圖方便就用時間戳了
let sn = new Date().getTime()
wx.showLoading({
title: '識別中...'
})
recorderManager.start(recorderConfig)
//開啟鏈接
wx.connectSocket({
url: 'wss://vop.baidu.com/realtime_asr?sn=' + sn,
protocols: ['websocket'],
success() {
console.log('連接成功')
_this.initEventHandle()
}
})
},
//監(jiān)聽websocket返回的數(shù)據(jù)
initEventHandle() {
let _this = this
wx.onSocketMessage((res) => {
let result = JSON.parse(res.data.replace('\n',''))
if(result.type == 'MID_TEXT'){
_this.tran(result.result, 'value')
_this.setData({
textDis: 'none',
value: result.result,
})
}
if(result.type == 'FIN_TEXT'){
let value = _this.data.text
let tranStr = value + result.result
_this.tran(tranStr, 'text')
_this.setData({
value: '',
valueEn: '',
textDis: 'block',
text: tranStr,
})
}
})
wx.onSocketOpen(() =>
//發(fā)送數(shù)據(jù)幀
_this.wsStart()
console.log('WebSocket連接打開')
})
wx.onSocketError(function (res) {
console.log('WebSocket連接打開失敗')
})
wx.onSocketClose(function (res) {
console.log('WebSocket 已關(guān)閉!')
})
},
發(fā)送開始、音頻數(shù)據(jù)、結(jié)束幀
wsStart() {
let config = {
type: "START",
data: {
appid: XXXXXXXXX,//百度實時語音識別appid
appkey: "XXXXXXXXXXXXXXXXXX",//百度實時語音識別key
dev_pid: 15372,
cuid: "cuid-1",
format: "pcm",
sample: 16000
}
}
wx.sendSocketMessage({
data:JSON.stringify(config),
success(res){
console.log('發(fā)送開始幀成功')
}
})
},
wsSend(data){
wx.sendSocketMessage({
data:data,
success(res){
console.log('發(fā)送數(shù)據(jù)幀成功')
}
})
},
wsStop(){
let _this = this
this.setData({
click: true,
})
_this.stop()
let config = {
type: "FINISH"
}
wx.hideLoading()
recorderManager.stop()
wx.sendSocketMessage({
data:JSON.stringify(config),
success(res){
console.log('發(fā)送結(jié)束幀成功')
}
})
},
小程序錄音回調(diào)
onShow: function () {
let _this = this
recorderManager.onFrameRecorded(function (res){
let data = res.frameBuffer
_this.wsSend(data)
})
recorderManager.onInterruptionBegin(function (res){
console.log('錄音中斷')
_this.wsStopForAcc()
})
recorderManager.onStop(function (res){
console.log('錄音停止')
})
},
到此這篇關(guān)于微信小程序通過websocket實時語音識別的實現(xiàn)代碼的文章就介紹到這了,更多相關(guān)微信小程序websocket實時語音識別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
layui中的switch開關(guān)實現(xiàn)方法
今天小編就為大家分享一篇layui中的switch開關(guān)實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JS數(shù)組操作大全對象數(shù)組根據(jù)某個相同的字段分組
這篇文章主要介紹了JS數(shù)組操作大全對象數(shù)組根據(jù)某個相同的字段分組,需要注意的是,在開發(fā)過程這種數(shù)組的處理函數(shù),應(yīng)當(dāng)被編寫到項目的公共工具函數(shù)庫中全局調(diào)用,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
微信小程序?qū)崿F(xiàn)可拖動懸浮圖標(biāo)(包括按鈕角標(biāo)的實現(xiàn))
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)可拖動懸浮圖標(biāo)(包括按鈕角標(biāo)的實現(xiàn)),本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-12-12
基于JS實現(xiàn)bookstore靜態(tài)頁面的實例代碼
本文給大家分享一段核心代碼基于js實現(xiàn)的bookstore靜態(tài)頁面,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友參考下2017-02-02
微信小程序?qū)崿F(xiàn)卡片左右滑動效果的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)卡片左右滑動效果的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
JavaScript中使用sencha gridpanel 編輯單元格、改變單元格顏色
ExtJS中的表格功能非常強大,包括了排序、緩存、拖動、隱藏某一列、自動顯示行號、列匯總、單元格編輯等實用功能,通過本篇文章給大家介紹JavaScript中使用sencha gridpanel 編輯單元、改變單元格顏色,感興趣的朋友一起學(xué)習(xí)2015-11-11

