基于vue-element组件实现音乐播放器功能

最近在写一个基于github-page和gist的博客,想加个音乐播放器,做了一个早上,发出来分享一下演

最近在写一个基于 github-page 和 gist 的博客, 想加个音乐播放器, 做了一个早上, 发出来分享一下

演示地址 https://github-laziji.github.io

效果

使用到的组件

element组件

• 布局 Layout
• 按钮 Button
• 滑块 Slider
• 进度条 Progress
• 弹出框 Popover

html5组件

audio

实现代码

更详细的实现可以看 https://github.com/GitHub-Laziji/vblog

<template>
 <div>
 <el-row>
 <el-col :span="4">
 <el-popover
 placement="top-start"
 trigger="hover">
 <div style="text-align: center">
 <el-progress 
 color="#67C23A"
 type="circle" 
 :percentage="music.volume"></el-progress><br>
 <el-button 
 @click="changeVolume(-10)"
 icon="el-icon-minus" 
 circle></el-button>
 <el-button 
 @click="changeVolume(10)"
 icon="el-icon-plus" 
 circle></el-button>
 </div>
 <el-button 
 @click="play"
 id="play"
 slot="reference"
 :icon="music.isPlay?'el-icon-refresh':'el-icon-caret-right'" 
 circle></el-button>
 </el-popover>
 </el-col>
 <el-col :span="14" style="padding-left: 20px">
 <el-slider
 @change="changeTime"
 :format-tooltip="formatTime"
 :max="music.maxTime"
 v-model="music.currentTime" 
 style="width: 100%;"></el-slider>
 </el-col>
 <el-col :span="6" style="padding: 9px 0px 0px 10px;color:#909399;font-size: 13px">
 {{formatTime(music.currentTime)}}/{{formatTime(music.maxTime)}}
 </el-col>
 </el-row>
 <audio ref="music" loop autoplay> 
 <source src="http://sc1.111ttt.cn:8282/2018/1/03m/13/396131232171.m4a?tflag=1519095601&pin=6cd414115fdb9a950d827487b16b5f97#.mp3" type="audio/mpeg">
 </audio>
 </div>
</template>
<script>
 export default{
 data(){
 return {
 music:{
 isPlay:false,
 currentTime:0,
 maxTime:0,
 volume:100
 }
 }
 },
 mounted(){
 this.$nextTick(()=>{
 setInterval(this.listenMusic,1000)
 })
 },
 methods:{
 listenMusic(){
 if(!this.$refs.music){
 return
 }
 if(this.$refs.music.readyState){
 this.music.maxTime = this.$refs.music.duration
 }
 this.music.isPlay=!this.$refs.music.paused
 this.music.currentTime = this.$refs.music.currentTime
 },
 play(){
 if(this.$refs.music.paused){
 this.$refs.music.play()
 }else{
 this.$refs.music.pause()
 }
 this.music.isPlay=!this.$refs.music.paused
 this.$nextTick(()=>{
 document.getElementById('play').blur()
 })
 },
 changeTime(time){
 this.$refs.music.currentTime = time
 },
 changeVolume(v){
 this.music.volume += v 
 if(this.music.volume>100){
 this.music.volume = 100
 }
 if(this.music.volume<0){
 this.music.volume = 0
 }
 this.$refs.music.volume = this.music.volume/100
 },
 formatTime(time){
 let it = parseInt(time)
 let m = parseInt(it/60)
 let s = parseInt(it%60)
 return (m<10?"0":"")+parseInt(it/60)+":"+(s<10?"0":"")+parseInt(it%60)
 }
 } 
 }
</script>

总结

以上所述是小编给大家介绍的基于vue-element组件实现音乐播放器功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！