服务器之家

服务器之家 > 正文

微信小程序通过websocket实时语音识别的实现代码

时间:2021-08-26 15:44     来源/作者:yiyou12138

之前在研究百度的实时语音识别,并应用到了微信小程序中,写篇文章分享一下。

先看看完成的效果吧

微信小程序通过websocket实时语音识别的实现代码

前置条件

申请百度实时语音识别key 百度AI接入指南

创建小程序

设置小程序录音参数

在index.js中输入

?
1
2
3
4
5
6
7
8
9
10
const recorderManager = wx.getRecorderManager()
const recorderConfig = {
 duration: 600000,
 frameSize: 5, //指定当录音大小达到5KB时触发onFrameRecorded
 format: 'PCM',
 //文档中没写这个参数也可以触发onFrameRecorded的回调,不过楼主亲测可以使用
 sampleRate: 16000,
 encodeBitRate: 96000,
 numberOfChannels: 1
}

使用websocket连接

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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()
  }
 })
},
 
//监听websocket返回的数据
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(() =>
  //发送数据帧
  _this.wsStart()
  console.log('WebSocket连接打开')
 })
 wx.onSocketError(function (res) {
  console.log('WebSocket连接打开失败')
 })
 wx.onSocketClose(function (res) {
  console.log('WebSocket 已关闭!')
 })
},

发送开始、音频数据、结束帧

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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('发送开始帧成功')
  }
 })
},
 
wsSend(data){
 wx.sendSocketMessage({
  data:data,
  success(res){
   console.log('发送数据帧成功')
  }
 })
},
 
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('发送结束帧成功')
  }
 })
},

小程序录音回调

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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('录音停止')
 })
},

到此这篇关于微信小程序通过websocket实时语音识别的实现代码的文章就介绍到这了,更多相关微信小程序websocket实时语音识别内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家! 

原文链接:https://segmentfault.com/a/1190000023682530

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部