hlt_app/components/Recorder/CustomRecorder.vue

<template>
	<view class="custom-recorder">
		<view class="record-file-list" v-if="list.length">
			<view class="record-file-list-item" v-for="(item, index) in list" :key="index">
				{{item.path}}
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" class="pop-up-box">
			<view class="pop-up-content">
				<view class="content-header">
					音频录音
				</view>
				<view class="content-body">
					<view class="content-body-duration">
						{{duration}}
					</view>
					<view class="icon">

					</view>
					<view class="btn">
						<button style="height: 68rpx;line-height: 68rpx;border-radius: 1998rpx;" type="primary"
							@longpress="handleStart" @touchcancel="handleStop"
							@touchend="handleStop">{{btnText[recordStatus]}}</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import moment from 'moment';
	// #ifdef APP-PLUS
	console.log('走的app')
	const recorder = plus.audio.getRecorder();
	const player = plus.audio.createPlayer({
		autoplay: false
	});
	// #endif
	
	// #ifdef MP-WEIXIN
	console.log('走的微信')
	const recorder = wx.getRecorderManager();
	const player = wx.createInnerAudioContext();
	// #endif


	export default {
		data() {
			return {
				list: [],
				duration: "00:00:00",
				recordStatus: "stop",
				btnText: {
					stop: "按住说话",
					start: "说完了"
				},
				voicePath: '',
				realDuration: 100
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			let self = this;
			recorder.onStop(function (res){
				console.log('结束啦')
				let { tempFilePath, duration } = res
				self.voicePath = path
				console.log(self.voicePath)
				console.log('时长', duration)
			})
			// 监听播放进度
			player.onTimeUpdate((res)=>{
				console.log(res)
			})
			// 监听播放进度
			recorder.onStart(function(res){
				console.log('开始啦')
				console.log(res)
			})
			// 监听播放进度
			recorder.onError(function(res){
				console.log('出错啦')
				console.log(res)
			})
			// #endif
		},
		beforeDestroy() {
			player.destroy(); // 释放音频资源
		},
		methods: {
			startRecord() {
				console.log('开始录音');
				// #ifdef APP-PLUS
				console.log('走的app')
				recorder.record({
						format: 'amr',
						filename: "_doc/hlt_app/录音文件"
					},
					(path) => {
						console.log('录制成功')
						// 此处就要上传这个文件
						// 上传成功后,生成一条记录
						this.voicePath = path
						console.log(this.voicePath)
						plus.io.getAudioInfo({
							filePath: path,
							success: ({
								duration
							}) => {
								console.log('时长', duration)
								list.push({
									path,
									duration
								})
							}
						})
					},
					(err) => {
						uni.$msg(err)
					}
				)
				// #endif
				
				// #ifdef MP-WEIXIN
				console.log('走的微信')
				recorder.start()
				// #endif
			},
			// 结束录音
			endRecord() {
				console.log('录音结束');
				recorder.stop();
			},
			// 播放
			playVoice() {
				console.log('播放录音');
				if (this.voicePath) {
					// #ifdef APP-PLUS
					player.setStyles({
						src: this.voicePath
					});
					// #endif
					// #ifdef MP-WEIXIN
					player.src = this.voicePath
					// #endif
					player.play()
				}
			},
			// 打开底部弹窗，用于开始录音
			handleOpenRecord() {
				this.$refs.popup.open()
			},
			// 按住说话事件
			// 开始录音, 并计时
			handleStart() {
				this.startRecord()
				this.recordStatus = 'start'
				this.timer && clearInterval(this.timer)
				// 计时器内部处理经过时长并显示在面板
				let timeStart = 0
				this.timer = setInterval(() => {
					timeStart += 1000
					let sec = this.timeFormat(moment.duration(timeStart).asSeconds() % 60)
					let min = this.timeFormat(moment.duration(timeStart).asMinutes() % 60)
					let hour = this.timeFormat(moment.duration(timeStart).asHours())
					this.duration = `${hour}:${min}:${sec}`
				}, 1000)
			},
			timeFormat(time) {
				if (0 <= time && time < 1) {
					return '00'
				}
				if (time >= 1 && time < 10) {
					return '0' + Math.floor(time)
				} else {
					return Math.floor(time)
				}
			},
			// 松开事件
			// 结束录音
			handleStop() {
				this.endRecord()
				this.recordStatus = 'stop'
				this.resetRecord()
			},
			resetRecord() {
				this.percent = 0
				this.duration = "00:00:00"
				this.timer && clearInterval(this.timer)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.custom-recorder {
		width: 100%;

		.pop-up-box {
			.pop-up-content {
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;

				.content-header {
					background-color: #fff;
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: Source Han Sans;
					font-size: 32rpx;
					font-weight: 500;
					font-feature-settings: "kern" on;
					color: $uni-text-color;
				}

				.content-body {
					background: #EFF0F5;
					height: 400rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.btn {
						margin-top: 72rpx;
					}
				}
			}
		}
	}
</style>