- 微信小程序使用科大讯飞语音评测,保姆级教程!
最近微信小程序项目中,需要添加语音评测功能,就选用了科大讯飞的语音评测流式版接口,但在使用过程中,遇到了很多问题,再网上搜资料,搜了好多,也没直接能用的,好在后来参考了许多资料后,终于调试成功了,接下来,跟大家分享一下我是怎么处理的。 1.第一步,准备所用到的工具,下载官方jsdemo,将 base64js 文件复制到自己的小程序项目中,用npm安装crypto-js xmldom这2个工具 然后,将工具导入到页面中 const CryptoJS = require('crypto-js') const Base64 = require('../../tools/base64js').Base64; var DOMParser = require('xmldom').DOMParser; 2.第二步,初始化用到的变量,定义用到的关键函数 const APPID = '替换成你自己的' const API_SECRET = '替换成你自己的' const API_KEY = '替换成你自己的' let audioData = [] //存储音频流的数组 let socketTask = null //小程序的socketTask let handlerInterval = null // 定时器,用来定时发送数据流 function getWebSocketUrl() {//生成socket使用的url return new Promise((resolve, reject) => { var url = 'wss://ise-api.xfyun.cn/v2/open-ise' var host = 'ise-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/open-ise 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 =Base64.encode(authorizationOrigin) url = `${url}?authorization=${authorization}&date=${date}&host=${host}` resolve(url) }) } 3.开始录音 //开始录音 startVoiceRecord(){ let that = this that.setData({recordState:'recording'}) recorderManager.onStart(() => { console.log('recorder start') }) recorderManager.onPause(() => { console.log('recorder pause') }) recorderManager.onStop((res) => { console.log('recorder stop', res) const { tempFilePath } = res that.startUpRecord()//录音完成,准备调用讯飞接口 }) recorderManager.onFrameRecorded((res) => { const { frameBuffer } = res console.log('frameBuffer.byteLength', frameBuffer.byteLength) let u8Arr = new Uint8Array(frameBuffer) audioData.push(u8Arr) //将每一帧的数据取出,放到audioData中,准备使用 }) const options = { duration: 180000, sampleRate: 16000, numberOfChannels: 1, encodeBitRate: 44100, frameSize: 2, format: 'pcm', } recorderManager.start(options) }, 4. 开始socket连接,准备上传数据并处理 startUpRecord(){ let that = this getWebSocketUrl().then(( url)=>{ let newURL = encodeURI(url) socketTask = wx.connectSocket({ url: newURL, }) socketTask.onOpen(()=>{ console.log('打开了socket') that.webSocketSend() }) socketTask.onMessage((e)=>{ // result 在这里做信息处理 console.log('收到了结果:',e) that.result(e.data) }) socketTask.onError((err)=>{ //结束录音 console.log('socket 出错:',err) }) socketTask.onClose(()=>{ // 结束录音 console.log('socket 关闭:') }) }) }, webSocketSend() { console.log('开始发送数据',audioData) let that = this let audioDataUp = audioData.splice(0, 1) var params = { common: { app_id:APPID, }, business: { category: 'read_sentence', // read_syllable/单字朗读,汉语专有 read_word/词语朗读 read_sentence/句子朗读 https://www.xfyun.cn/doc/Ise/IseAPI.html#%E6%8E%A5%E5%8F%A3%E8%B0%83%E7%94%A8%E6%B5%81%E7%A8%8B rstcd: 'utf8', group: 'pupil', sub: 'ise', ent: 'cn_vip', tte: 'utf-8', cmd: 'ssb', auf: 'audio/L16;rate=16000', aus: 1, aue: 'raw', text: '\uFEFF' + '今天天气怎么样?' }, data: { status: 0, encoding: 'raw', data_type: 1, data: that.toBase64(audioDataUp[0]), }, } console.log(JSON.stringify(params)) socketTask.send({data: JSON.stringify(params)}) handlerInterval = setInterval(() => { // websocket未连接 if (!socketTask) { clearInterval(handlerInterval) return } // 最后一帧 if (audioData.length === 0) { console.log('数据发送完毕') socketTask.send( {data: JSON.stringify({ business: { cmd: 'auw', aus: 4, aue: 'raw' }, data: { status: 2, encoding: 'raw', data_type: 1, data: '', }, })} ) audioData = [] clearInterval(handlerInterval) return false } audioDataUp = audioData.splice(0, 1) // 中间帧 console.log('audioDataUp:',audioDataUp[0]) socketTask.send( { data: JSON.stringify({ business: { cmd: 'auw', aus: 2, aue: 'raw' }, data: { status: 1, encoding: 'raw', data_type: 1, data: that.toBase64(audioDataUp[0]), }, })} ) }, 40) }, result(resultData) { // 识别结束 let jsonData = JSON.parse(resultData) if (jsonData.data && jsonData.data.data) { let data = Base64.decode(jsonData.data.data) const doc=new DOMParser().parseFromString(data,'text/xml'); let sentence = doc.getElementsByTagName('read_sentence')[1] let accuracy_score = sentence.getAttribute('accuracy_score') let emotion_score = sentence.getAttribute('emotion_score') let fluency_score = sentence.getAttribute('fluency_score') let total_score = sentence.getAttribute('total_score') let integrity_score = sentence.getAttribute('integrity_score') let phone_score = sentence.getAttribute('phone_score') let tone_score = sentence.getAttribute('tone_score') let is_rejected = sentence.getAttribute('is_rejected') console.log('parseRes:',accuracy_score,emotion_score,fluency_score,total_score) //评测结果在这里,就出来了,然后就可以拿评测数据去使用了 } if (jsonData.code === 0 && jsonData.data.status === 2) { // 在这里结束socket socketTask.close() } if (jsonData.code !== 0) { socketTask.close() console.log(`${jsonData.code}:${jsonData.message}`) } }, 到这里,整个流程就完了,祝愿大家都能一次调用成功,有什么问题的话,咱们再讨论!
2023-06-13 - 微信开发者工具扩展插件版本能否支持手动更新?
背景 小程序项目接入Eslint后计划在小组内推广,然后同事问我个问题: 微信开发者工具能看到eslint报错的嘛? 这确实是个好问题,这点对于习惯用微信开发者工具的同事来说确实需要考虑下(本人习惯vscode工具开发,然后安装eslint插件这些就很方便,是我考虑不周了)。 落地方案 微信开发者工具-> 设置 -> 扩展设置 -> 编辑器设置-> 安装Eslint && Prettier,安装完后记得重新启动微信开发者工具。 进入测试 发现不满足规则的,开发者工具会置灰,鼠标移上去也支持报错提示&快速fix, 但是好像没有vscode的红色波浪线报错,就好像没这么直观了。 查看下微信开发者工具中集成的eslint的版本还是v2.1.6。 [图片] 对比之后发现是eslint的版本不同导致的效果差异: v2.1.16在vscode无波浪线&问题处无问题;在v2.2.2新版本中有波浪线&问题处能实时看到问题原因。 [图片] [图片] 问题: 官方能否支持开发者手动升级插件的版本?(eg: 在这个demo中若能支持手动升级到v2.2.2的版本,应该是可以更好地优化错误提示的) 官方: 相关文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/editorextensions.html 但本人在测试的时候,并未看到官方相关截图,测试微信开发者工具版本: stable 1.05.2204250。 [图片] 问题处理方案: > 秉承官方出的功能肯定是有落地方案的,在google一波果然发现了解决方案。 找到VSCODE中已经安装好的插件包(windows电脑默认在: C:\Users\xxx\.vscode\extensions), eg: eslint找到微信开发者中扩展插件的安装目录: 右上角编辑-> 打开编辑器扩展目录即可打开。[图片] 找到想要替换的插件包的文件夹,打开其package.json,找到其ID(metadata字段)[图片] [图片] 打开编辑 -> 管理编辑器设置 到这一步就被卡死了,翻天找地都没看到网友说的下面这张图是哪里来的(猜测是版本的问题,这里就不纠结了,换个方案) [图片](下图来源于网络图,若有侵权等行为请随时联系删除) 建议解决方案 找到VSCODE中已经安装好的插件包(windows电脑默认在: C:\Users\xxx\.vscode\extensions), eg: eslint,拷贝该文件夹。扩展插件-> 更多-> 导入已安装的vscode扩展,具体操作如下图:该步骤会把我们vscode工具有的扩展工具都同步过来。注意:这里推荐从已解包的扩展文件夹安装(不一定vscode的插件都用得上,按需导入比较合理) [图片] 啊哦,导入不成功,因为版本不兼容。 [图片] 终极问题:微信开发者工具扩展插件版本能否支持手动更新??对于这种版本不兼容的,普通开发者能做的是什么呢?
2022-05-23