vue绑定html音乐播放器,vue-element做出音乐播放器功能（附代码）

这次给大家带来vue-element做出音乐播放器功能(附代码)，vue-element做出音乐播放器功能的注意事项有哪些，下面就是实战案例，一起来看一下。

效果

使用到的组件

element组件布局 Layout

按钮 Button

滑块 Slider

进度条 Progress

弹出框 Popover

html5组件

audio

实现代码

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

placement="top-start"

trigger="hover">

color="#67C23A"

type="circle"

:percentage="music.volume">

@click="changeVolume(-10)"

icon="el-icon-minus"

circle>

@click="changeVolume(10)"

icon="el-icon-plus"

circle>

@click="play"

id="play"

slot="reference"

:icon="music.isPlay?'el-icon-refresh':'el-icon-caret-right'"

circle>

@change="changeTime"

:format-tooltip="formatTime"

:max="music.maxTime"

v-model="music.currentTime"

style="width: 100%;">

{{formatTime(music.currentTime)}}/{{formatTime(music.maxTime)}}

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)

}

}

}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：