vue2.0+mint-ui 音频播放器显示进度条开发实例

html

<template>
	<div>
		<div class="audioOff">
			<div class="ofplayBox">
				<audio id="audio" :src="audioURl"></audio>
				<div class="isPlayImg">
					<!--开始播放-->
					<img v-if="!playflg" @click="play()" src="../assets/image/播放-终端页.png" />
					<!--暂停-结束播放-->
					<img v-if="playflg" @click="stop()" src="../assets/image/暂停-终端页.png" />
				</div>
				<!--slider进度条-->
				<div class="progress">
					<mt-range v-model="rangeValue" :value='rangeValue' :step="10" :max="offset">
					</mt-range>
					<div class="duration"><span>{{starttime}}</span><span class="right-timer">{{duration}}</span></div>
					<div class="cover"></div>
				</div>
			</div>
		</div>
	</div>
</template>

js

	export default {
		name: 'audioMsg',
		data() {
			return {
				//这首歌时间有点长 大家测试的时候可以换一个短点的MP3文件
				audioURl:'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
				playflg: false,
				rangeValue: 0,
				starttime: '00:00', //正在播放时长
				duration: '01:03', //总时长
				offset: 0
			}
		},
		methods: {
			//开始播放
			play() {
				var audio = document.querySelector('#audio');
				audio.play();
				this.playflg = true
				this.offset = parseInt(audio.duration)
				console.log('开始播放-时长=' + audio.duration)
				console.log(Math.ceil(this.offset))
				if(this.playflg = true) {
					var timer = setInterval(() => {
						var min = "0" + parseInt(audio.currentTime / 60);
						var max = parseInt(audio.duration);
						var sec = parseInt(audio.currentTime % 60);
					    if (sec < 10) {
					      sec = "0" + sec;
					    };
						this.starttime = min + ':' + sec;   /*  00:00  */
						this.rangeValue = parseInt(audio.currentTime)
						if(this.rangeValue == this.offset) {
							this.rangeValue=0;/*播放结束后进度条归零*/
							this.starttime='00:00'; /*播放结束后时间归零*/
							this.stop()
							clearInterval(timer)
						}
					}, 1000)
				}

			},
			//暂停-结束
			stop() {
				var audio = document.querySelector('#audio');
				audio.pause();
				this.playflg = false
				console.log('暂停播放')
			},
			//滑动进度条

		},

	}

css

	.audioOff {
		width: 100%;
		padding: 0.4rem 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.ofplayBox {
		width: 95%;
		height: 1.36rem;
		background: #f6f7f7;
		display: flex;
		border-radius: 0.1rem;
	}
	
	.isPlayImg {
		width: 1rem;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.isPlayImg img {
		width: 0.66rem;
		height: 0.66rem;
	}
	
	.progress {
		flex: 1;
		height: 0.66rem;
		margin-left: 0.2rem;
		font-size: 0.26rem;
		margin-top: 0.2rem;
		position: relative;
	}
	.cover{
		width: 0.28rem;
		height: 0.1rem;
		position: absolute;
		background: yellow;
		top: 0.2rem;
		right: 0rem;
		background: #f6f7f7;
	}
	.mt-range-thumb {
		background-color: #fff;
		position: absolute;
		left: 0;
		top: 0.15rem;
		width: 0.26rem !important;
		height: 0.26rem !important;
		border-radius: 100%;
		cursor: move;
		-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
		box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
		z-index: 999;
	}
	
	.duration {
		display: flex;
		justify-content: space-between;
	}
	.right-timer{
	margin-right: 0.27rem;
	}

之前开发做过小程序的音频开发,思路是一样的,大家吸收一下，

能优化一下的小伙伴们自己在根据需求优化一下

能帮助到大家很高兴,关注我共同探讨研究问题,共同进步！