前言微信小程序中可以实现录音的主要有wx.startRecord()和wx.getRecorderManager(),其中wx.startRecord()从微信开发者工具基础库1.6后停止维护,开始启用更加强大的wx.getRecorderManager()。一、关于wx.startRecord()的坑wx.startRecord()使用还是相当容易的,微信官方示例便是使用wx.startRecord()。1 wx.startRecord({2 success(res) {3 const tempFilePath = res.tempFilePath4 console.log(res)5 }6 })7 setTimeout(function () {8 wx.stopRecord() // 结束录音9 }, 3000)成功录音的返回值为一个含有音频临时路径的对象1 errMsg: “startRecord:ok”2 tempFilePath: “http://tmp/wx88e053d45b28e2cf.o6zAJs-nrru-YZpqRQeb-X8EzBfk.JVhmiR78K4oY2e7522995230f041a81c5967a4e1598c.silk” 这个silk格式为加密格式,在真机上可以播放,上传到服务器以后,其它用户无法播放,只有上传者可以播放。如果要分享给别人,得先解密,再转换为其它格式,网上的教程很多,但是比较麻烦二、关于wx.getRecorderManager()的实战解析有一个项目,需要使用录音,上传到云存储后,分享给其它人。 1 const recorderManager = wx.getRecorderManager() 2 const backgroundAudio = wx.getBackgroundAudioManager() 3 var util = require(‘../../utils/util.js’); 4 Page({ 5 data: { 6 openRecordingdis: “block”, //显示录机图标 7 shutRecordingdis: “none”, //隐藏停止图标 8 recordingTimeqwe: 0, //录音计时 9 setInter: “”, //录音名称 10 soundUrl: “” 11 }, 12 13 //录音计时器 14 recordingTimer: function() { 15 var that = this; 16 //将计时器赋值给setInter 17 that.data.setInter = setInterval( 18 function() { 19 var time = that.data.recordingTimeqwe + 1; 20 that.setData({ 21 recordingTimeqwe: time 22 }) 23 }, 1000); 24 }, 25 26 27 //开始录音 28 openRecording: function() { 29 var that = this; 30 wx.getSystemInfo({ 31 success: function(res) { 32 that.setData({ 33 shutRecordingdis: “block”, 34 openRecordingdis: “none” 35 }) 36 } 37 }) 38 const options = { 39 duration: 60000, //指定录音的时长,单位 ms,最大为10分钟(600000),默认为1分钟(60000) 40 sampleRate: 16000, //采样率 41 numberOfChannels: 1, //录音通道数 42 encodeBitRate: 96000, //编码码率 43 format: ‘mp3’, //音频格式,有效值 aac/mp3 44 frameSize: 50, //指定帧大小,单位 KB 45 } 46 //开始录音计时 47 that.recordingTimer(); 48 //开始录音 49 recorderManager.start(options); 50 recorderManager.onStart(() => { 51 console.log(‘。。。开始录音。。。’) 52 }); 53 //错误回调 54 recorderManager.onError((res) => { 55 console.log(res); 56 }) 57 }, 58 59 //结束录音 60 shutRecording: function() { 61 var that = this; 62 wx.getSystemInfo({ 63 success: function(res) { 64 that.setData({ 65 shutRecordingdis: “none”, 66 openRecordingdis: “block” 67 }) 68 } 69 }) 70 recorderManager.stop(); 71 recorderManager.onStop((res) => { 72 const that = this 73 let timestamp = util.formatTime2(new Date()); 74 console.log(‘。。停止录音。。’, res.tempFilePath) 75 const { 76 tempFilePath 77 } = res; 78 //结束录音计时 79 clearInterval(that.data.setInter); 80 wx.cloud.uploadFile({ 81 cloudPath: “sounds/”+timestamp + ‘-‘ + this.randomNum(10000, 99999) + ‘.mp3’, 82 filePath: tempFilePath, 83 // 成功回调 84 success: res => { 85 console.log(‘上传成功’, res) 86 that.setData({ 87 soundUrl: res.fileID, 88 // time: util.formatTime1(new Date()) 89 }) 90 }, 91 }) 92 93 }) 94 }, 95 96 //录音播放 97 recordingAndPlaying: function(eve) { 98 99 // console.log(eve)100 var tempsound = eve.currentTarget.dataset.soundid101 tempsound = “https://6e65-newdj-d79af2-1257790921.tcb.qcloud.la/sounds”+this.midstr(tempsound)102 // console.log(tempsound)103 wx.playBackgroundAudio({104 //播放地址105 dataUrl: tempsound106 })107 },108 109 //生成从minNum到maxNum的随机数110 randomNum(minNum, maxNum) {111 switch (arguments.length) {112 case 1:113 return parseInt(Math.random() * minNum + 1, 10);114 break;115 case 2:116 return parseInt(Math.random() * (maxNum – minNum + 1) + minNum, 10);117 break;118 default:119 return 0;120 break;121 }122 },123 midstr(str) {124 var strnum = str.lastIndexOf(‘/’)125 var ministr = str.substr(strnum)126 return ministr127 },128 }) 1.首先声明录音组件const recorderManager = wx.getRecorderManager()2. 开始录音的实现 1 //开始录音 2 openRecording: function() { 3 var that = this; 4 wx.getSystemInfo({ 5 success: function(res) { 6 that.setData({ 7 shutRecordingdis: “block”, 8 openRecordingdis: “none” 9 })10 }11 })12 const options = {13 duration: 60000, //指定录音的时长,单位 ms,最大为10分钟(600000),默认为1分钟(60000)14 sampleRate: 16000, //采样率15 numberOfChannels: 1, //录音通道数16 encodeBitRate: 96000, //编码码率17 format: ‘mp3’, //音频格式,有效值 aac/mp318 frameSize: 50, //指定帧大小,单位 KB19 }20 //开始录音计时 21 that.recordingTimer();22 //开始录音23 recorderManager.start(options);24 recorderManager.onStart(() => {25 console.log(‘。。。开始录音。。。’)26 });27 //错误回调28 recorderManager.onError((res) => {29 console.log(res);30 })31 }, 3. 结束录音的实现 1 //结束录音 2 shutRecording: function() { 3 var that = this; 4 wx.getSystemInfo({ 5 success: function(res) { 6 that.setData({ 7 shutRecordingdis: “none”, 8 openRecordingdis: “block” 9 })10 }11 })12 recorderManager.stop();13 recorderManager.onStop((res) => {14 const that = this15 let timestamp = util.formatTime2(new Date());16 console.log(‘。。停止录音。。’, res.tempFilePath)17 const {18 tempFilePath19 } = res;20 //结束录音计时 21 clearInterval(that.data.setInter);22 wx.cloud.uploadFile({23 cloudPath: “sounds/”+timestamp + ‘-‘ + this.randomNum(10000, 99999) + ‘.mp3’,24 filePath: tempFilePath,25 // 成功回调26 success: res => {27 console.log(‘上传成功’, res)28 that.setData({29 soundUrl: res.fileID,30 // time: util.formatTime1(new Date())31 })32 },33 })34 })35 }, 第13行,录音停止后,生成mp3格式的临时文件,以jason格式提示,包含时长,文件大小和临时文件名1 {2 duration: 25323 fileSize: 422684 tempFilePath: “http://tmp/wx88e053d45b28e2cf.o6zAJs-nrru-YZpqRQeb-X8EzBfk.73z3a3qIwC7yc13f32e3d179133ac77ca7851ec7d25b.durationTime=2532.mp3″5 } 第15行,生成一个时间戳,用来生成文件名,第22行,上传至云存储,为了避免出现同时有多个进程上传的极端情况,加了一个5位数的随机数,第29行,上传成功后,将生成的云文件ID返给data变量soundUrl1 {2 errMsg: “cloud.uploadFile:ok”3 fileID: “cloud://newdj-d79af2.6e65-newdj-d79af2-1257790921/sounds/20190731162324-40454.mp3″4 } 4.播放云存储里的录音 1 //录音播放 2 recordingAndPlaying: function(eve) { 3 // console.log(eve) 4 var tempsound = eve.currentTarget.dataset.soundid 5 tempsound = “https://6e65-newdj-d79af2-1257790921.tcb.qcloud.la/sounds” + this.midstr(tempsound) 6 // console.log(tempsound) 7 wx.playBackgroundAudio({ 8 //播放地址 9 dataUrl: tempsound10 })11 }, 点击播放按钮时,把录音的云文件名传递到JS1 <view bindtap=’recordingAndPlaying’ data-soundid=”{{soundUrl}}”>2 <image class=”progress_img” src=’/images/play.png’></image>3 </view> data-soundid—>eve.currentTarget.dataset.soundid然后第5行,将云文件名,转换为可供真机使用的https文件,midstr(tempsound)函数是取”/”之后的文件名,”https://6e65-newdj-d79af2-1257790921.tcb.qcloud.la/sounds”,为本项目所使用云开发环境所对应的路径将”cloud://newdj-d79af2.6e65-newdj-d79af2-1257790921/sounds”替换后即可使用。 注意标黑部分,通过对两个路径的比对,可以找到cloud://转https://的规律:”cloud://云环境ID.”===>”https://”,之后再加上”.tcb.qcloud.la”即可5.生成随机数的通用函数 1 //生成从minNum到maxNum的随机数 2 randomNum(minNum, maxNum) { 3 switch (arguments.length) { 4 case 1: 5 return parseInt(Math.random() * minNum + 1, 10); 6 break; 7 case 2: 8 return parseInt(Math.random() * (maxNum – minNum + 1) + minNum, 10); 9 break;10 default:11 return 0;12 break;13 }14 }, 6.取”/”右侧的字符串 midstr(str) { var strnum = str.lastIndexOf(‘/’) var ministr = str.substr(strnum) return ministr }, 三、WXML的实现 1 <view class=’progress_box’ bindtap=’openRecording’ style=”display:{{openRecordingdis}}”> 2 <view class=”progress_bgs”> 3 <view class=”progress_bg”> 4 <image class=”progress_img” src=’/images/record.png’></image> 5 </view> 6 </view> 7 </view> 8 <view class=’progress_box’ bindtap=’shutRecording’ style=”display:{{shutRecordingdis}}”> 9 <view class=”progress_bgs”>10 <view class=”progress_bg”>11 <image class=”progress_img” src=’/images/stop.png’></image>12 </
微信小程序实现录音格式为mp3,并上传到云开发环境
相关推荐
微信支付服务商支付模式,sub_mch_id与su涟源市E企盈小程序b_appid不匹配
前端东乡县E企盈小程序css样式小圆点样式
QQ出现0x000000c并且打平凉E企盈小程序不开网页
小程序textarea文本保存后杭锦旗E企盈小程序显示不换行的问题
永善县E企盈小程序如何解决小程序textarea层级最高的问题
小程序或者公众号授权给第三方平台舞阳县E企盈小程序流程
微淮阳县E企盈小程序信小程序如何引入使用js插件?
微信小程序(开发工具、项目内蒙古E企盈小程序创建)
QQ小程序,邀四会市E企盈小程序请码申请链接
小程序——点击太谷县E企盈小程序添加账户
微信小程序永嘉县E企盈小程序企业付款到零钱API开发
小程序黄陂区E企盈小程序蓝牙实战
最新评论
不错的小程序案例
优秀的团队,不错的服务!
讲的很好
主播长的帅气
好系统好服务
优秀的团队
好服务,值得信赖
不错的服务