<!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>
自定义视频控件同理
版权声明：本文为qq_41585377原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。