基于vue和element-ui做的自定义音乐播放控件

梦起，不止关注技术

已于 2022-03-25 09:28:29 修改

阅读量1k

点赞数

分类专栏：技巧文章标签： vue html5 前端

于 2020-03-06 14:44:37 首次发布

本文链接：https://blog.csdn.net/qq_41585377/article/details/104695814

版权

技巧专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	</head>
	<body>
		<div class="music_box">
			<audio :src="music.url" ref="music"  @loadedmetadata="getmusicLength" @timeupdate="timeUpdate">
				当前浏览器不支持audio
			</audio>
			<div class="play_box" @click="playMusic">
				<img src="img/play.png" v-show="music.play==false" >
				<img src="img/parse.png" v-show="music.play==true" >
			</div>
			<div class="jindu">
				<div class="play_time">{{Math.floor(parseInt(music.currentTime)/60)}}:{{parseInt(music.currentTime)%60}}</div>
				<div class="block">
				    <el-slider class="commonSlider" :show-tooltip="false" v-model="music.currentTime"
							   :max="music.audioLength" @change="changeMusicTime">
					</el-slider>
				  </div>
				<div class="zong_time">{{Math.floor(parseInt(music.audioLength)/60)}}:{{parseInt(music.audioLength)%60}}</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: '.music_box',
			data: {
				music:{
					play: false,//播放还是暂停 true播放中
					audioLength: 0,//audio时长
					url: "http://m801.music.126.net/20220325095159/f569af131b76b1456ebedf9e278adbe1/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/11983356173/ed2f/6024/be41/2dc456563c5f9c9535b75ecb066c0325.mp3",//音频url
					currentTime: 0,//当前播放时间
					lastTime: null,//标记时间戳
				}
			},
			methods: {
				playMusic(){
					if (this.music.play) {
						this.music.play = false;
						this.$refs.music.pause();
					} else {
						this.music.play = true;
						Math.abs(this.music.currentTime - this.$refs.music.currentTime) > 2 ? this.$refs.music.currentTime = this.music.currentTime : '';
						this.$refs.music.play();
						this.$refs.music.muted = false
					}
				},
				changeMusicTime(val){
					console.log(val, 'music')
					if (this.$refs.music) {
						this.$refs.music.currentTime = val;
					}
				},
				getmusicLength(){
					this.music.audioLength = this.$refs.music.duration;
					console.log(this.$refs.music.duration)
				},
				timeUpdate(){
					let nowTime = Date.now()
					let gapTime = 1000;
					if (!this.music.lastTime || nowTime - this.music.lastTime > gapTime) {
						if (this.$refs.music) {
							let time = this.$refs.music.currentTime;
							this.music.currentTime = time;
						}
						this.music.lastTime = nowTime
					}
				},
			},
			mounted() {
				
			}
		})
	</script>
</html>

自定义视频控件同理