YULIN 小程序 无标签 2019年12月10日 12:13:00 6797 微信小程序实现录音并播放,解决IOS只能播放一次BUG 本代码已经过模拟器+安卓+ios真机测试 - [我不看代码,我要直接下载demo][1] ![请输入图片描述][2] WXML代码 开始录音 停止录音 --录音时长{{times}}- 播放录音 暂停播放 {{voidurl}} 录音、暂停录音,计时,播放录音,暂停播放录音 已通过开发工具+安卓+ios真机测试,录音结束后会显示音频地址,录音回放可以播放无数次 JS代码 //在Page外定义变量: const recorderManager = wx.getRecorderManager() const innerAudioContext = wx.createInnerAudioContext() var THandle = null //计时代码 start_tims(){ let that = this if (THandle != null) { clearInterval(THandle) THandle = null that.setData({ times: 0 }) } THandle = setInterval(() => { that.setData({ times:that.data.times+1 }) }, 1000) }, end_tims(){ let that = this clearInterval(THandle) THandle = null that.setData({ times: 0 }) }, //开始录音的时候 start: function () { let that = this const options = { duration: 10000,//指定录音的时长,单位 ms sampleRate: 16000,//采样率 numberOfChannels: 1,//录音通道数 encodeBitRate: 96000,//编码码率 format: 'mp3',//音频格式,有效值 aac/mp3 frameSize: 50,//指定帧大小,单位 KB } //开始录音 recorderManager.start(options); recorderManager.onStart(() => { wx.showToast({ icon:'none', title: '开始录音', }) that.start_tims() }); //错误回调 recorderManager.onError((res) => { console.log(res); }) recorderManager.onStop((res) => { that.end_tims() this.tempFilePath = res.tempFilePath; this.setData({ voidurl: res.tempFilePath }) wx.showToast({ icon: 'none', title: '停止录音' }) console.log('停止录音', res.tempFilePath) const { tempFilePath } = res }) }, pause: function () { recorderManager.pause(); recorderManager.onPause((res) => { wx.showToast({icon: 'none',title: '暂停录音'}) console.log('暂停录音') }) }, resume: function () { recorderManager.resume(); recorderManager.onStart(() => { wx.showToast({ icon: 'none', title: '重新开始录音' }) console.log('重新开始录音') }); //错误回调 recorderManager.onError((res) => { console.log(res); }) }, //停止录音 stop: function () { wx.showLoading({ title: '保存中', }) console.log('停止录音') recorderManager.stop(); }, //播放声音 play: function () { innerAudioContext.src = encodeURI(this.tempFilePath) // innerAudioContext.loop = true //循环播放 console.log('播放', innerAudioContext.src ) wx.showToast({ icon: 'none', title: '播放' }) innerAudioContext.play() innerAudioContext.onPlay((e) => { console.log('开始播放',e) }) innerAudioContext.onError((res) => { console.log(res.errMsg) console.log(res.errCode) }) }, stopPlay(){ innerAudioContext.stop((e)=>{ console.log('暂停播放',e) }) } [1]: https://github.com/mqllin/douyin-xiaochengxu-duanshipin [2]: http://qny.tuchuang.mqllin.cn/Fqbx_su0P59t3TZT9wht7rrToGt6 分享到QQ好友 Last 微信小程序实现抖音短视频切换效果 Next js获取时间等处理时间等常用方法 仅有一条评论 Neal · 2020年 haha 回复
Neal · 2020年
haha