微信小程序录音实现
最近在写一个小程序(原创诗词平台,名字叫作“诗人呀”)的功能,需求是需要把用户的录音记录并上传到服务器,然后调用接口来实现播放功能。
翻阅不少资料都发现小程序对wx.startRecord()接口不在维护,
注意:1.6.0 版本开始,本接口不再维护。建议使用能力更强的 wx.getRecorderManager 接口
需要使用新的接口来处理,官方文档又不符合我的需求,所以就决定自己动手来实现一下录音播放功能。
因此我们使用的使用 wx.getRecorderManager 接口:
首先使用方法获取对象
const recorderManager = wx.getRecorderManager()
const innerAudioContext = wx.createInnerAudioContext()
然后写一个button来调用开始录音的方法。
//开始录音的时候
start: function () { const options = {
duration: 10000,//指定录音的时长,单位 ms
sampleRate: 16000,//采样率
numberOfChannels: 1,//录音通道数
encodeBitRate: 96000,//编码码率
format: 'mp3',//音频格式,有效值 aac/mp3
frameSize: 50,//指定帧大小,单位 KB
}
//开始录音
recorderManager.start(options);
recorderManager.onStart(() => {
console.log('recorder start')
});
//错误回调
recorderManager.onError((res) => {
console.log(res);
})
},
再写一个button来调用停止录音的方法。
//停止录音
stop: function () {
recorderManager.stop();
recorderManager.onStop((res) => {
this.tempFilePath = res.tempFilePath;
console.log('停止录音', res.tempFilePath)
const { tempFilePath } = res
})
},
最后写一个播放声音的方法
//播放声音
play: function () {
innerAudioContext.autoplay = true
innerAudioContext.src = this.tempFilePath,
innerAudioContext.onPlay(() => {
console.log('开始播放')
})
innerAudioContext.onError((res) => {
console.log(res.errMsg)
console.log(res.errCode)
})
},
这样就完成新API的操作了,WXML代码如下:
<button bindtap="start" class='btn'>开始录音</button>
<button bindtap="stop" class='btn'>停止录音</button>
<button bindtap="play" class='btn'>播放录音</button>
但是我发现点击播放根本播放不出来。这是为什么呢,路径也可以打印出来,原来小程序返回的临时路径根本无法播放,
需要通过wx.uploadFile()方法来从后台获取处理好的mp3文件来进行播放。
1. setTimeout(function () {
2. var urls = app.globalData.urls + "/Web/UpVoice";
3. console.log(s.data.recodePath);
4. wx.uploadFile({
5. url: urls,
6. filePath: s.data.recodePath,
7. name: 'file',
8. header: {
9. 'content-type': 'multipart/form-data'
10. },
11. success: function (res) {
12. var str = res.data;
13. var data = JSON.parse(str);
14. if (data.states == 1) {
15. var cEditData = s.data.editData;
16. cEditData.recodeIdentity = data.identitys;
17. s.setData({ editData: cEditData });
18. }
19. else {
20. wx.showModal({
21. title: '提示',
22. content: data.message,
23. showCancel: false,
24. success: function (res) {
25.
26. }
27. });
28. }
29. wx.hideToast();
30. },
31. fail: function (res) {
32. console.log(res);
33. wx.showModal({
34. title: '提示',
35. content: "网络请求失败,请确保网络是否正常",
36. showCancel: false,
37. success: function (res) {
38. }
39. });
40. wx.hideToast();
41. }
42. });
将onStop中获取到的临时路径上传到你的服务器当中,进行处理语音识别和语义,将返回的结果放到audio播放组件中就可以播放音频了。
实现完成后的小程序部分截图如下:
如果大家对于其他非技术细节也感兴趣的话,欢迎点击此处访问。
微信小程序录音实现的更多相关文章
- 微信小程序--录音
var app = getApp(), $ = require("../../utils/util.js"); const recorderManager = wx.getReco ...
- 微信小程序语音识别服务搭建全过程解析(https api开放,支持新接口mp3录音、老接口silk录音)
silk v3(或新录音接口mp3)录音转olami语音识别和语义处理的api服务(ubuntu16.04服务器上实现) 重要的写在前面 重要事项一: 所有相关更新,我优先更新到我个人博客中,其它地方 ...
- 微信小程序语音识别服务搭建全过程解析(项目开源在github)
silk v3录音转olami语音识别和语义处理的api服务(ubuntu16.04服务器上实现) ## 重要的写在前面 重要事项一: 目前本文中提到的API已支持微信小程序录音文件格式:silk v ...
- 微信小程序语音识别开发过程记录 微信小程序silk转mp3 silk转wav 以及ffmpeg使用
说说最近在开发微信小程序语音识别遇到的问题吧 最先使用微信小程序录音控件可以拿到silk格式,后来微信官方又支持mp3格式了 但是我们拿到这些格式以后,都还不能直接使用,做语音识别,因为目前百度的语音 ...
- 微信小程序silk格式转码成mp3格式
最近小程序项目需要录制语音并上传到服务器,经过查资料了解 目前微信小程序录音的文件后缀名是silk,因此需要转换. 经过查资料了解,参考一下的地址 https://github.com/kn007/s ...
- 语音识别功能_微信小程序代办清单任务
最近想给自己的代办清单任务微信小程序想加个语音识别识别功能,废话不多说,直接说重点,语音识别使用的是百度语音识别api,因为微信小程序的录音输入文件目前只能是mp3或aac 但是百度语音识别不支持这两 ...
- 微信小程序(有始有终,全部代码)开发--- 新增【录音】以及UI改进
开篇语 寒假发了一篇练手文章,不出意外地火了: <简年15: 微信小程序(有始有终,全部代码)开发---跑步App+音乐播放器 > 后来又发了BUG修复的版本,出乎意料的火了: 简年18: ...
- 微信小程序常见问题集合(长期更新)
最新更新: 新手跳坑系列:推荐阅读:<二十四>request:fail错误(含https解决方案)(真机预览问题 跳坑指南<七十>如何让微信小程序服务类目审核通过 跳坑六十九: ...
- 微信小程序简介
什么是微信小程序? 今年下半年的时候,微信推出了微信小程序,当然刚刚推出来的时候还是处于内测阶段,但是这并不影响这家伙的热度,也许这是一个新的时代的开启.但是什么是微信小程序呢?微信应用号是一个app ...
随机推荐
- Dynamics CRM2013 picklist下拉项行数控制
CRM2013和前面几个版本相比有了很大的变化,本文中讲述的picklist亦然.CRM2013的picklist效果图如下所示 目前能看到的是会根据下拉内容项的数量不同而显示不同的下拉行数,但有时客 ...
- 浅谈OC内存管理
一.基本原理 (一)为什么要进行内存管理. 由于移动设备的内存极其有限,所以每个APP所占的内存也是有限制的,当app所占用的内存较多时,系统就会发出内存警告,这时需要回收一些不需要再继续使用的内存空 ...
- React native开发中常见的错误
react native环境搭建请移步:react native环境搭建 这里说说react native创建完成之后,运行中出现的常见问题, 问题1: java.lang.RuntimeExcept ...
- 应届生求职:IT博客真能当技术型职位的求职利器?
正值一年一度的大学毕业季,面对严峻的就业形势,700万大学毕业生,不到三成的签约率,可真是苦煞了没有工作经验,也没有项目经验的应届毕业生们.拿什么打动面试官?成绩?特长?社会实践?如果这些都不能让阅读 ...
- 【面试笔试算法】Problem 8: 然而沼跃鱼早就看穿了一切(hiho题库)
时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 fjxmlhx每天都在被沼跃鱼刷屏,因此他急切的找到了你希望你写一个程序屏蔽所有句子中的沼跃鱼("marshtom ...
- ITU-T Technical Paper: 测量QoS的基本网络模型
本文翻译自ITU-T的Technical Paper:<How to increase QoS/QoE of IP-based platform(s) to regionally agreed ...
- Android群英传笔记——第四章:ListView使用技巧
Android群英传笔记--第四章:ListView使用技巧 最近也是比较迷茫,但是有一点点还是要坚持的,就是学习了,最近离职了,今天也是继续温习第四章ListView,也拖了其实也挺久的了,list ...
- android 自定义gallerey并实现预览功能
自从Gallery被谷歌废弃以后,Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果.的确HorizontalScrollView可以实现Gal ...
- 【编程练习】收集的一些c++代码片,算法排序,读文件,写日志,快速求积分等等
写日志: class LogFile { public: static LogFile &instance(); operator FILE *() const { return m_file ...
- region server 中的OOM原因
首先要清楚reginserver中内存是如何使用的. reginserver中内存总体分成三部分:blocksize专供读使用的内存,memstore供读写使用的内存,其它内存. 其中 ...