微信小程序实现录音格式为mp3，并上传到云开发环境

前言微信小程序中可以实现录音的主要有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     </