uni-app小程序实现音频播放，uniapp播放录音，uniapp简单实现播放录音

效果图

实现

复制到.vue文件即可预览效果

<template>
	<view class="container">
		<view style="margin-bottom: 20px;">
			<view class="audio-time">
				<text>{
   
   {currentTimeStr}}</text><!-- 进度时间 -->
			</view>
			<u-slider v-model="sliderValue" min="0" :max="sliderMax" @change="sliderChangeComplate()"></u-slider>
			<!-- 进度条 -->
			<view class="audio-time">
				<text>{
   
   {timeStr}}</text><!-- 总时间 -->
			</view>
		</view>
		<u-button :text="btn_text" type="success" size="normal" @click="changePlayState()">
		</u-button>
	</view>
</template>

<script>
	export default {
      
      
		data() {
      
      
			return {
      
      
				btn_text: '播放语音',
				timeStr: '00:00',
				sliderValue: 0,
				currentTimeStr: '00:00',
				sliderMax: 0,
				rePlay: false,
				innerAudioContext: null,
				audioPlay: false,
			}
		},
		onLoad(options) {
      
      
			this.creatAudio();
		},
		methods: {
      
      
			// 录音实例-初始化
			creatAudio() {
      
      
				this.innerAudioContext = uni.createInnerAudioContext(); //创建实例
				//this.innerAudioContext.autoplay = true;//设置是否自动播放
				//this.innerAudioContext.src = ''; //音频的url
				// 开始播放
				this.innerAudioContext.onPlay(() => {
      
      
					this.btn_text = '正在播放...';
					this.audioPlay = true;
				});
				// 暂停播放
				this.innerAudioContext.onPause(() => {
      
      
					this.btn_text = '播放暂停';
					this.audioPlay = false;
				});
				// 播放结束
				this.innerAudioContext.onEnded(() => {
      
      
					this.btn_text = '重新播放';
					this.audioPlay = false;
					this.rePlay = true;
					this.innerAudioContext.stop();
				});
				// 停止播放
				this.innerAudioContext.onStop(() => {
      
      
					this.btn_text = '重新播放';
					this.audioPlay = false;
					this.rePlay = true;
				});
				// 播放错误
				this.innerAudioContext.onError((res) => {
      
      
					console.log("播放错误", res)
				});
				// 进度
				this.timeUpdate();
			},
			// 播放时间进度
			timeUpdate() {
      
      
				this.sliderValue = 0;
				this.currentTimeStr = '00:00';
				this.sliderMax = 0;
				this.timeStr = '00:00';
				this.innerAudioContext.onTimeUpdate(() => {
      
      
					const {
      
      
						currentTime,
						duration
					} = this.innerAudioContext; //这俩参数是这个api自带的参数

					// 实时进度
					this.sliderValue = parseInt(currentTime);
					// 变动的时间
					this.currentTimeStr = this.formatTime(currentTime);
					// 进度条最大值
					this.sliderMax = parseInt(duration);
					// 总时长
					this.timeStr = this.formatTime(duration);
				});
			},
			// 录音暂停播放
			changePlayState() {
      
      
				if (this.audioPlay == false) {
      
      
					if (!this.innerAudioContext.src) {
      
      
						this.innerAudioContext.src = getApp().globalData.imgUrl + "/upload/49/tem/1.mp3"; // 音频地址
					}
					this.innerAudioContext.play();
					// 当重新播放的时候进来
					if (this.rePlay == true) {
      
      
						this.timeUpdate();
						this.rePlay = false;
					}
				} else {
      
      
					this.innerAudioContext.pause()
				}
			},
			// 音频前进回退
			sliderChangeComplate(val) {
      
      
				// 变动的时间
				this.currentTimeStr = this.formatTime(val);
				// 实时进度
				this.sliderValue = parseInt(val);
				this.innerAudioContext.seek(val);
				this.innerAudioContext.pause();
			},
			//格式化时间格式
			formatTime(num) {
      
      
				num = num.toFixed(0);
				let second = num % 60;
				if (second < 10) second = '0' + second;
				let min = Math.floor(num / 60);
				if (min < 10) min = '0' + min;
				return min + ":" + second;
			},
			/**
			 * 格式化时间 
			 * @param {String} date 原始时间格式
			 * 格式后的时间：hh:mm:ss
			 **/
			formatSecond(seconds) {
      
      
				var h = Math.floor(seconds / 3600) < 10 ? '0' + Math.floor(seconds / 3600) : Math.floor(seconds / 3600);
				var m = Math.floor((seconds / 60 % 60)) < 10 ? '0' + Math.floor((seconds / 60 % 60)) : Math.floor((
					seconds / 60 % 60));
				var s = Math.floor((seconds % 60)) < 10 ? '0' + Math.floor((seconds % 60)) : Math.floor((seconds % 60));
				return h + ":" + m + ":" + s;
			}
		},
	}
</script>

<style>
	page {
      
      
		background-color: #fff !important;
	}

	.container {
      
      
		padding: 10px 15px;
	}
</style>

问题：开发者工具中.onTimeUpdate方法可能会失效！

官方参考：https://uniapp.dcloud.net.cn/api/media/audio-context.html#
其他博客参考：https://blog.csdn.net/weixin_45328705/article/details/114091301

录音实现参考：https://blog.csdn.net/weixin_43992507/article/details/129857780