最近呢，用小程序做了个录音的功能，接下来呢，与大家一起分享一下我的开发心得，希望能帮到大家。那我们就继续向下👇看吧~
需求呢，差不多是这样的：
单击开始录制（不是摁住不放哦）点击完成上传录音录音计时功能当到达360s，自动进行上传
好了那来看看效果图吧，如下图所示：
接下来，进入主题，奥利给
一开始呢，打算用wx.startRecord()，后来看了下文档，发现从基础库 1.6.0 开始，本接口停止维护，被 wx.getRecorderManager 代替了，下面的我会说一下录音的几个重点功能，那我们继续向下走👇
1. data数据
data: {recorderManager: null,curTime: 0,recorder: {status: 'ready', // 'ready' | 'recording'text: '点击录制',},timer: null,secondes: 0,startTimestamp: 0,isupload: false},
2.点击录制与停止
recordBtn: throttle(function () {let {status } = this.data.recorder;if(!this.data.isupload){if (status === 'ready') {this.getRecordLimit()} else if (status === 'recording') {this._endRecord()}}}, 1000),
3.开始录音
_startRecord() {this.data.startTimestamp = Date.now();const options = {duration: 600000,//指定录音的时长，单位 ms，最大为10分钟（600000），默认为1分钟（60000）sampleRate: 16000,//采样率numberOfChannels: 1,//录音通道数encodeBitRate: 96000,//编码码率format: 'mp3',//音频格式，有效值 aac/mp3frameSize: 50,//指定帧大小，单位 KB}//点击录制this.data.recorderManager.start(options);//开始录音计时this.countDown();this.data.recorderManager.onStart(() => {console.log('点击录制...')})//错误回调this.data.recorderManager.onError((res) => {console.log('录音失败', res);})},
4.停止录音
_endRecord() {clearInterval(this.data.timer);this.data.recorderManager.stop();this.data.recorderManager.onStop((res) => {console.log('停止录音', res)let filePath = res.tempFilePath;let duration = res.duration;if((Date.now() - this.data.startTimestamp) / 1000 < 2) {wx.showToast({title: '录音时间太短!',icon: 'none',duration: 1500}return;}this._uploadRecord(filePath, duration)})},
5.上传录音
export const ossUploadFile = (fileUrl) => {return new Promise((resolve, reject) => {//获取阿里云oss上传相关凭证getOssToken('audio/').then(res => {let ossPolicy = res.data;let fileKey = getAudioFileKey();wx.uploadFile({url: '需要将录音上传到的域名' filePath: fileUrl, // onStop之后生成的tempFilePathname: 'file', formData: {'key': 'audio/' + fileKey,'policy': ossPolicy.policy,'OSSAccessKeyId': ossPolicy.accessId,'signature': ossPolicy.signature,"success_action_status": 200},success() {resolve(OSS_HOST + "/audio/" + fileKey)},fail(err) {reject('upload fail => ', err)}})}).catch(err => {reject('getOssTokenFail => ', err)})})}
6.录音授权
getRecordLimit() {let that = this;wx.getSetting({success(res) {if (!res.authSetting['scope.record']) {// 未授权wx.authorize({scope: 'scope.record',success () {// 一次才成功授权that._startRecord()},fail(err) {console.log(err)wx.showModal({title: '温馨提示',content: '您未授权录音，该功能将无法使用',showCancel: true,confirmText: "授权",success: function (res) {if (res.confirm) {wx.openSetting({success: (res) => {if (!res.authSetting['scope.record']) {//未设置录音授权wx.showModal({title: '提示',content: '您未授权录音，功能将无法使用',showCancel: false,success: function () {}})} else {// 二次才成功授权that._startRecord()}},fail: function () {console.log("授权设置录音失败");}})}},fail: function (err) {console.log("打开录音弹框失败 => ", err);}})}})} else {// 已授权that._startRecord()}}})},
7.统计时长（包括自动停止录音，并上传录音）
countDown() {this.data.timer = setInterval(() => {this.data.secondes++;if (this.data.secondes > 360) {clearInterval(this.data.timer);this.data.recorderManager.stop();this.data.recorderManager.onStop((res) => {console.log('时辰已到，自动跳转')let filePath = res.tempFilePath;let duration = 360000;this._uploadRecord(filePath, duration)})return;}this.setData({curTime: this.data.secondes});}, 1000);}
8.录音动画
这一块呢主要是运用帧动画写的，大家可以参考一下哦~
<view class="recode"><view class="record-wave-multiple"><view></view><view></view><view></view></view><view class="record-bgm"></view></view>.recode {position: relative;display: flex;justify-content: center;align-items: center;width: 120rpx;height: 120rpx;border-radius: 50%;color: #fff;}.recode .record-bgm {width: 105rpx;height: 105rpx;border-radius: 50%;background:rgba(105,129,255,1);}.recode .record-wave-multiple {position: absolute;left: 0; top: 0;}.record-wave-multiple>view {display: inline-block;background-color: #6981FF;border: 0 solid #6981FF;position: absolute;top: -25rpx;left: -27rpx;width: 170rpx;height: 170rpx;border-radius: 100%;opacity: 0;-webkit-animation: circle-wave-multiple 1.8s cubic-bezier(.41,.4,.67,1) 0s infinite;animation: circle-wave-multiple 1.8s cubic-bezier(.41,.4,.67,1) 0s infinite;}.record-wave-multiple>view:nth-child(2) {-webkit-animation-delay: .6s;animation-delay: .6s;}.record-wave-multiple>view:nth-child(3) {-webkit-animation-delay: 1.2s;animation-delay: 1.2s;}@keyframes circle-wave-multiple {0% {opacity: 0;transform: scale(.4);}5% {opacity: .5;}100% {opacity: 0;transform: scale(1);}}
下面呢，给大家说一下几个注意事项：⚠️
在执行stop();的时候，记得在后面加上 onStop和onError，不然它会自动去找你有onStop或者有onError 的地方，如果需要共用的话不写也行，当然这是看情况的哦，一定切记！！！在开发者工具上呢，会录不进去音，不过在真机上是没问题的
到此呢，咱的录音功能也就写的差不多了，如果说小编的代码有什么问题，或者需要优化的地方呢，或者需要帮助，欢迎在下方评论区留言，小编会第一时间出现在大家面前~
最后呢，祝大家每天开开心心，快快乐乐，让bug离地我们远远的，永远都不要出现，哈哈哈😁~
