uniapp+uView 【详解】录音,自制音频播放器

效果预览

代码实现

html 复制代码
<template>
	<view class="btnListBox">
		<view class="audioBox" v-if="audioLength">
			<u-row>
				<u-col span="2">
					<u--text align='center' :text="currentTime"></u--text>
				</u-col>
				<u-col span="8">
					<u-slider @change='currentTime_change' v-model="currentTime" :max='audioLength'></u-slider>
				</u-col>
				<u-col span="2">
					<u--text align='center' :text="audioLength+' 秒'"></u--text>
				</u-col>
			</u-row>
		</view>
		<view v-if="record_status === '准备录音'" @click="startRecord">
			<u-icon :color='iconColor' name="mic" size='100px'></u-icon>
			<u--text align='center' text="点我开始录音"></u--text>
		</view>
		<view v-if="record_status === '录音中'" @click="endRecord">
			<Breathing>
				<u-icon :color='iconColor' name="mic" size='100px'></u-icon>
			</Breathing>
			<u--text align='center' text="录音中"></u--text>
		</view>
		<view v-if="record_status === '已录音'" class="row">
			<view @click="reset">
				<u-icon :color='iconColor' name="reload" size='100px'></u-icon>
				<u--text align='center' text="重新录制"></u--text>
			</view>
			<view v-if="play_status== '待播放' ||  play_status== '暂停中'" @click="play">
				<u-icon :color='iconColor' name="play-circle-fill" size='100px'></u-icon>
				<u--text align='center' text="播放试听"></u--text>
			</view>
			<view v-if="play_status== '播放中'" @click="pause">
				<u-icon :color='iconColor' name="pause-circle-fill" size='100px'></u-icon>
				<u--text align='center' text="暂停播放"></u--text>
			</view>
		</view>
	</view>
</template>
<script>
	// 创建对象--录音机
	const recorderManager = uni.getRecorderManager();
	// 创建对象--录音
	const audio = uni.createInnerAudioContext()
	import Breathing from "../components/breathing.vue";
	export default {
		components: {
			Breathing,
		},
		data() {
			return {
				iconColor: '#3c9cff',
				// 录音当前播放位置
				currentTime: 0,
				audioLength: 0,
				record_status: '准备录音',
				play_status: '待播放',
				voicePath: '',
			}
		},
		onLoad() {
			let self = this;
			recorderManager.onStart(res => {});
			recorderManager.onStop(res => {
				self.voicePath = res.tempFilePath;
				audio.src = res.tempFilePath
			});
			audio.onCanplay(res => {
				if (audio.duration) {
					self.audioLength = audio.duration.toFixed(0)
				}
			})
			audio.onTimeUpdate(res => {
				self.audioLength = audio.duration.toFixed(0)
				self.currentTime = audio.currentTime.toFixed(0);
			});
			audio.onEnded(res => {
				self.currentTime = 0
				self.play_status = '待播放'
			});
		},
		methods: {
			currentTime_change(new_currentTime) {
				audio.seek(new_currentTime)
			},
			reset() {
				this.record_status = '准备录音'
				this.voicePath = ''
				this.audioLength = 0
				this.currentTime = 0
			},
			startRecord() {
				recorderManager.start();
				this.record_status = '录音中'
			},
			endRecord() {
				recorderManager.stop();
				this.record_status = '已录音'
			},
			play() {
				if (this.voicePath) {
					audio.play();
					this.play_status = '播放中'
				}
			},
			pause() {
				audio.pause();
				this.play_status = '暂停中'
			}
		}
	}
</script>
<style scoped>
	.audioBox {
		width: 100%;
	}

	.btnListBox {
		flex-direction: column;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}

	.row {
		width: 100%;
		display: flex;
		justify-content: space-evenly;
	}
</style>

组件 Breathing.vue 见 vue 组件封装 -- 【呼吸】动画效果二

官方文档

注意事项

电脑上录音的事件响应并不灵敏,建议在手机上预览最终效果。

相关推荐
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
尚学教辅学习资料11 小时前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie23411 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
qq229511650219 小时前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
qq22951165021 天前
微信小程序uniapp基于Android的流浪动物管理系统 70c3u
微信小程序·uni-app
qq22951165021 天前
微信小程序 uniapp+vue老年人身体监测系统 acyux
vue.js·微信小程序·uni-app
摇头的金丝猴2 天前
uniapp vue3 使用echarts-gl 绘画3d图表
前端·uni-app·echarts
小远yyds2 天前
跨平台使用高德地图服务
前端·javascript·vue.js·小程序·uni-app
qq22951165022 天前
uniapp+vue加油服务系统 微信小程序
vue.js·微信小程序·uni-app
重生之我是菜鸡程序员2 天前
uniapp 使用vue/pwa
javascript·vue.js·uni-app