music功能 vue_基于vue-element元件實作音樂播放器功能

最近在寫一個基于 github-page 和 gist 的部落格, 想加個音樂播放器, 做了一個早上, 發出來分享一下

效果

使用到的元件

element元件

布局 Layout

按鈕 Button

滑塊 Slider

進度條 Progress

彈出框 Popover

html5元件

audio

實作代碼

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)

}

}

}

總結

以上所述是小編給大家介紹的基于vue-element元件實作音樂播放器功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回複大家的！