wkiwi的博客
ဆ
首页学无止境小程序开发小程序录音与播放录音趟坑

小程序录音与播放录音趟坑

发布时间：5年前热度： 1439 ℃评论数：

测试环境 iphoneX 12.4

iphone.jpeg


测试环境 小米 android 9

小米.jpeg

通过上边两张图可以看出差异 ：

 IOS中  在点击暂停录音之后，点击继续录音，调用继续录音事件，  会先执行一次继续录音事件再执行开始录音事件

而在android中， 在点击暂停录音之后，点击继续录音，调用继续录音事件，  会先执行一次继续录音事件再执行继续录音事件

在此处涉及到录音计时，平台差异导致定时器一直处于异常，调节时间超出开发预期，做以记录。


在语音播放上，编辑器不会触发语音播放完成事件，android与IOS真机器正常

html


<template>
	<view class="recording bg-mask" capture-catch:touchmove="preventTouchMove" v-if="show" @tap="close">
		<view class="recording-panel flex flex-column justify-between padding-30 " :class="show ? 'show': ''" @tap.stop="returnHandle">
			<view class="panel-hd padding-bottom-30">
				<view class="time text-center text-32 text-blod">{{voicePath ? playTimeStr: timeStr}}</view>
			</view>
			<view class="panel-bd flex justify-between align-center text-26">
				<view class="item text-center">
					<button class="kiwi-btn bg-transparent" @click="again">
						<view class="iconfont ic_zhong_lu mini"></view>
					</button>
					<view class="text padding-top-30">重录</view>
				</view>
				<view class="item text-center ">
					<button class="kiwi-btn bg-transparent " @click="startRecordOrPauseRecord">
						<view class="iconfont animation-zoom" :class="recording==1 ? 'ic_zan_ting':'ic_bo_fang'"></view>
					</button>
					<view class="text padding-top-30">{{!voicePath &&recording==0 ? '开始录音' : !voicePath &&recording==1 ?'暂停录音':!voicePath &&recording==2 ?'继续录音':voicePath&&!voicePlaying ?'试听':voicePath&&voicePlaying ?'停止播放':''}}</view>
				</view>
				<view class="item text-center">
					<button class="kiwi-btn bg-transparent" @click="endRecord">
						<view class="iconfont ic_wan_cheng mini"></view>
					</button>
					<view class="text padding-top-30">{{voicePath ? '上传':'完成'}}</view>
				</view>
			</view>
			<view class="panel-fd padding-bottom-20">
				<view class="text-center text-26 close" @click="close">取消</view>
			</view>
		</view>
	</view><!-- /.recording[录音] -->
</template>


js

<script>
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	// innerAudioContext.autoplay = true;
	export default {
		props: {
			show: {//是否显示录音弹出层
				type: [Boolean, String], 
				default: false
			}
		},
		name: 'recording',
		data() {
			return {
				voicePath: '',//录音的临时地址
				time:0 ,//录音时间
				recording:0,//是否已在录音中     0未开始，1已开始 2暂停中
				timeId:null,//定时器id
				voicePlaying:false,//是否在曲子播放中
				oplayTime:0,//缓存播放时间,
				playTime:0,//播放时间,
				playTimeId:null,//播放时间定时器
				recorderAgain:false,//重新录制
			};
		},
		computed: {
			timeStr:function(){ //录音时长
				let m = parseInt(this.time/60);
				m < 10&&(m = '0'+m)
				let s = this.time%60;
				s < 10&&(s = '0'+s)
				return   m +' : '+ s;
			},
			playTimeStr:function(){ //播放时长
				let m = parseInt(this.playTime/60);
				m < 10&&(m = '0'+m)
				let s = this.playTime%60;
				s < 10&&(s = '0'+s)
				return   m +' : '+ s;
			},
		},
		mounted() {
			let _this = this;
			recorderManager.onStop(function(res) { //结束录音
				_this.playTime = _this.time;//缓存录制的时长到试听时间上 
				_this.oplayTime = _this.time;//缓存录制的时长到试听时间上 
				_this.time = 0;//时间清零
				clearInterval(_this.timeId)
				_this.timeId = null
				_this.recording = 0
				console.log(res);	
				console.log('结束录音回调')	
				if(!_this.recorderAgain){//非点击重录
					_this.voicePath = res.tempFilePath;
				}
			});
			recorderManager.onStart(function(res) { //开始录音
				_this.recording = 1
				_this.recorderAgain = false
				console.log('开始录音回调')
				clearInterval(_this.timeId)
				_this.timeId = setInterval(()=>{
					_this.time = _this.time + 1
				},1000)
			});
			recorderManager.onPause(function(res) { //暂停录音
				clearInterval(_this.timeId)
				_this.timeId = null
				_this.recording = 2
				console.log('暂停录音回调')
			});
			recorderManager.onError(function(res) { //录音出错
				clearInterval(_this.timeId)
				_this.timeId = null
				console.log(res);
				console.log('录音出错回调')
			});
			recorderManager.onResume(function(res) { //继续录音
				_this.recording = 1
				clearInterval(_this.timeId)
				_this.timeId = setInterval(()=>{
					_this.time = _this.time + 1
				},1000)
				console.log('继续录音回调')
			});
			innerAudioContext.onPlay(() => {//播放录音
				_this.voicePlaying = true
				_this.playTimeId = setInterval(()=>{
					_this.playTime = _this.playTime - 1
				},1000)
				console.log('开始播放');
			});
			innerAudioContext.onPause(() => {//暂停播放
				_this.voicePlaying = true
				clearInterval(_this.playTimeId)
				_this.playTimeId = null
				console.log('暂停播放');
			});
			innerAudioContext.onStop(() => {//停止播放
				_this.voicePlaying = false
				_this.playTime = _this.oplayTime;
				clearInterval(_this.playTimeId)
				_this.playTimeId = null
				console.log('停止播放');
			});
			innerAudioContext.onEnded(() => {//播放完成
				_this.voicePlaying = false
				_this.playTime =_this.oplayTime;
				clearInterval(_this.playTimeId)
				_this.playTimeId = null
				console.log('播放完成停止');
			});
		},
		methods: {
			returnHandle:function(){//遮罩层内部弹窗区域点击拦截关闭事件
				return ;
			},
			again:function(){
				this.time = 0;
				this.playTime = 0;
				this.voicePath = ''
				this.recorderAgain = true
				clearInterval(this.playTimeId)
				clearInterval(this.timeId)
				this.playTimeId = null
				this.timeId = null
				if(this.recording != 0){
					this.endRecord()//停止录音
				}
				if(this.voicePlaying){
					this.stopVoice();//停止播放
				}
			},
			startRecordOrPauseRecord:function(){//开始录制或继续录制或者暂停录制
				if(!this.voicePath){//无有录音
					if(this.recording ==0){//开始录音 
						this.startRecord()
					}else if(this.recording ==1){//暂停录音 
						this.pauseRecord()
					}else if(this.recording ==2){//继续录音 
						this.resumeRecord()
					}
				}else{//已有录音出发语音播放
					if(!this.voicePlaying){//开始播放
						this.playVoice()
					}else{
						this.stopVoice()
					}
				}
			},
			preventTouchMove: function() {
				return;
			},
			close: function() {
				this.$bus('closeRecording', null);
				console.log('取消')
			},
			startRecord: function() {
				console.log('开始录音');
				const options = {
				  duration: 600000,
				  sampleRate: 44100,
				  numberOfChannels: 1,
				  encodeBitRate: 192000,
				  format: 'aac',
				  // frameSize: 50
				}
				recorderManager.start(options);
			},
			endRecord: function() {
				if(this.voicePath){//上传录音
					this.$base.defaults.toast('上传完成')
					this.$bus('closeRecording', null);
					return false
				}
				console.log('录音结束');
				console.log(this.recording)
				if(this.recording != 0){
					recorderManager.stop();
				}else{
					console.log('未开始无需结束');
				}
			},
			pauseRecord: function() {
				console.log('暂停录音');
				recorderManager.pause();
			},
			resumeRecord: function() {
				console.log('继续录音');
				recorderManager.resume();
			},
			playVoice: function() {
				console.log('播放录音');
				if (this.voicePath) {
					innerAudioContext.src = this.voicePath;
					innerAudioContext.play();
				}
			},
			pauseVoice:function(){
				console.log('暂停播放');
				innerAudioContext.pause();
			},
			stopVoice:function(){
				console.log('停止播放');
				innerAudioContext.stop();
			}
		}
	}
</script>


css

<style scoped lang="scss">
	.recording {
		width: 100%;
		position: fixed;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
	}

	.recording-panel {
		position: absolute;
		bottom:-550upx;
		left: 0;
		right: 0;
		width: 100%;
		height: 500upx;
		background: #fff;
		border-top-left-radius: 40upx;
		border-top-right-radius: 40upx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		transition: all ease .8s;
		&.show{
			bottom:0;
		}
	}

	.panel-bd {
		.item {
			width: 33.3333%;
		}

		.kiwi-btn {
			height: 180upx;
		}

		.iconfont {
			height: 180upx;
			width: 180upx;
			line-height: 180upx;
			border-radius: 180upx;
			background: #ffa521;
			color: #fff;
			margin: 0 auto;
			font-size: 50upx;
			font-weight: 900;

			&.mini {
				height: 100upx;
				width: 100upx;
				line-height: 100upx;
				border-radius: 100upx;
				background: #89b8ff;
				color: #fff;
				font-size: 30upx;
			}
		}
	}

	.close {
		color: #CCCCCC;
	}
	.animation-zoom{
		animation: all ease .8s;
	}
</style>


error

栏目导航

  1. 杂谈
  2. PHP
  3. 建站
  4. WEB前端
  5. 小程序开发

相关文章

  1. requestSubscribeMessage:fail can only be invoked by user TAP gesture. 14582 ℃
  2. 小程序录音被拒绝，如何引导用户打开授权 6575 ℃
  3. 京东/拼多多淘客小程序跳入路径 4430 ℃
  4. 小程序富文本图片宽度自适应 4183 ℃
  5. 微信小程序内容安全接口踩坑 4139 ℃
  6. 小程序遮罩层开发技巧 4025 ℃
  7. 首测微信小店组件版 3677 ℃
  8. 小程序苹果11适配 3359 ℃
  9. 微信小程序uploadFile返回数据为json字符串 2952 ℃
  10. 小程序全屏上下翻页带回弹 2657 ℃

手机扫码访问

wkiwi的博客 © http://blog.bemcss.com

网站地图

陕ICP备17015475号-5