本身开发微信小程序为主，文中小程序默认指的是微信小程序相关

需求和场景描述

社区养老中心有一组常住的老人，晚上需要护理人员定期进行护理夜巡，防止晚上老人有突发状况没有及时得到救助这里护理人员夜巡之后有个记录语音的需求场景，下面记录分享下录音主要功能实现

主要功能截图

功能实现

录音封装成独立的组件，方便之后需要的时候进行复用

录音组件

需求分析：

录音组件包含几个必备参数：录音授权状态、录音内容、录音时长、录音状态、播放状态
录音状态设定三个状态，分别为未录音、正在录音、录音完成。这里不考虑暂定断点续录，如果需要重录，可以把之前的录音删除，录制新的即可
播放状态设定仅两个简单的状态，未播放和正在播放

设置默认参数：

data() {
    return {
	audioValue: '', //录音内容
	duration: 0, //录音时长
	recodeStatus: 0, //录音状态 0:未录音,1:正在录音2:录音完成
	playStatus: 0, //播放状态 0:未播放,1:正在播放
	recoderAuthStatus: false //录音授权状态
    };
}

关键生命周期和关键逻辑

初始化组件判断是否已授权录音权限和初始化录音管理器和音频管理器

created() {
    //判断是否已授权录音权限
    this.getAuthSetting();
    //初始化录音管理器和音频管理器
    this.initRecorderManager();
}

获取权限设置
根据微信小程序文档要求，录音前需要先进行用户进行授权这里通过wx.getSetting API获取当前是否已经获取录音权限，并设置recoderAuthStatus字段来记录当前状态

getAuthSetting() {
    let that = this;
    wx.getSetting({
	success(res) {
	if (!res.authSetting['scope.record']) {
            wx.authorize({
		scope: 'scope.record',
		success() {
		that.recoderAuthStatus = true;
            },
            fail() {
            that.recoderAuthStatus = false;
	}
    });
	} else {
            that.recoderAuthStatus = true;
            }
        }
      });
  },    
}

初始化录音和音频管理器
录音管理器的初始化主要说下onStop的监听逻辑，监听onStop 格式化录音时长，单位为秒；录音时长限定最长为60秒，最短不小于1秒。符合录音时长的上传的云端并保存云端返回的音频地址
音频管理器的初始化的onEnded监听逻辑，将播放状态重置为未开始

initRecorderManager() {
    const recorderManager = wx.getRecorderManager();
    recorderManager.onError(() => {});
    //监听录音结束，在这里获取到录音结果。
    recorderManager.onStop(res => {
	const duration = this.fmtRecoderTime(res.duration); //获取录音时长
	//小程序录音最长1分钟(60秒)
	if (duration > 60) {
            this.tip('录音时间不能超过60"');
            this.recodeStatus = 2; //结束
            return;
	} else if (duration < 1) {
            this.duration = 1; //不计,未开始
            return;
	}
            this.duration = duration;
            //上传本地音频
            this.uploadAudio(res.tempFilePath, src => {
		this.audioValue = src.audio;
            });
	});
	this.recorderManager = recorderManager;
	//创建内部 audio 上下文 InnerAudioContext 对象。
	const innerAudioContext = wx.createInnerAudioContext();
	//监听音频自然播放至结束的事件
	innerAudioContext.onEnded(() => {
	//音频自然播放至结束的事件的回调函数
	this.playStatus = 0; //播放状态重置为未开始
	});
        innerAudioContext.onError(res => {});
        this.innerAudioContext = innerAudioContext;
}

销毁组件进行回收释放内存

destroyed() {
    //销毁音频对象
    this.destoryInnerAudioContext();
}

//销毁当前组件音频实例
destoryInnerAudioContext() {
    this.innerAudioContext.destroy();
    console.log('音频实例销毁啦');
}

监听录音内容由组件传给页面
录音完成后上传给云端对象存储返回地址和录音时长

watch:{
// 监听录音内容的变化，发出事件
    audioValue(n) {
       this.$emit('on-record-list', {url:n,duration:this.duration});
    }
}

录音组件基本控制
1.长按开始录音
开始录音需要定义好必备的录音参数这里定义了录音的时长、采样率、录音通道数、编码码率、音频格式、指定帧大小（单位KB）；通过之前初始化时的状态判断录音授权，如果已授权开始录音，未授权引导去设置开启录音权限后再进行录音操作。

recorderManagerStart() {
    this.recorderManager.start({
	duration: 60000,
	sampleRate: 44100,
	numberOfChannels: 1,
	encodeBitRate: 192000,
        format: 'mp3',
	frameSize: 50
    });
    this.recodeStatus = 1;
}
//开始录音
startRecorder(index) {
    let that = this;
    if (this.recoderAuthStatus) {
	this.recorderManagerStart();
    } else {
	wx.openSetting({
            success(res) {
                if (res.authSetting['scope.record']) { 
                  that.recoderAuthStatus = true;   
                  that.recorderManagerStart();
		}
            }
	});
    }
}

2.松开完成录音
完成录音设定对应状态状态，录音内容通过监听事件返回给页面

//结束录音
stopRecorder() {
    this.recodeStatus = 2;
    this.recorderManager.stop();
}

3.删除录音
清空录音内容、重置录音状态、播放状态和录音时长

//删除录音
removeRecoder(index) {
    this.audioValue = '';
    this.recodeStatus = 0;
    this.playStatus = 0;
    this.duration = 0;
}

结尾

看到这里基本的录音组件分享基本结束了，本次分享因为项目比较久远有些忘了，水平有限，如有不恰当之处欢迎指正和给出宝贵建议。感谢阅读，有缘再会。

END

念念不忘必有回响，有效的努力，会让你在未来闪闪发光。

本文正在参与「掘金小册免费学啦！」活动，点击查看活动详情。

Uniapp踩坑和经验分享④ | 小册免费学

需求和场景描述

主要功能截图

功能实现

录音组件

结尾

END