最近在写一个基于github-page和要点的博客,想加个音乐播放器,做了一个早上,发出来分享一下
演示地址https://github-laziji.github.io
效果
使用到的组件
元素组件
<李>布局布局李
<李>按钮按钮
<李>滑块滑块李
<李>进度条进步李
<李>弹出框弹出窗口
李
html5组件
音频
实现代码
更详细的实现可以看https://github.com/GitHub-Laziji/vblog
& lt; template>
& lt; div>
& lt; el-row>
& lt; el-col:跨度=" 4 "比;
& lt; el-popover
位置=" top-start "
触发=靶！北?
& lt; div比;
& lt; el-progress
颜色=" # 67 c23a "
type="圆"
:比例=" music.volume "祝辞& lt;/el-progress> & lt; br>
& lt; el-button
@click=" changeVolume (-10)“
图标=" el-icon-minus "
circle> & lt;/el-button>
& lt; el-button
@click=" changeVolume (10)”
图标=" el-icon-plus "
circle> & lt;/el-button>
& lt;/div>
& lt; el-button
@click="玩"
id=巴妗?
槽="参考"
:图标=" music.isPlay& # 63;“el-icon-refresh”: el-icon-caret-right”
circle> & lt;/el-button>
& lt;/el-popover>
& lt;/el-col>
& lt; el-col:跨度=?4”比;
& lt; el-slider
@change=" changeTime "
:format-tooltip=" formatTime”
:max=" music.maxTime”
v模型=" music.currentTime "
祝辞& lt;/el-slider>
& lt;/el-col>
& lt; el-col:跨度=?”比;
{{formatTime (music.currentTime)}}/{{formatTime (music.maxTime)}}
& lt;/el-col>
& lt;/el-row>
& lt;音频ref=耙衾帧毖穉utoplay>
& lt;源src=" http://sc1.111ttt.cn: 8282/2018/1/03m/13/396131232171.m4a& # 63; tflag=1519095601,销=6 cd414115fdb9a950d827487b16b5f97 # mp3”类型=耙羝?mpeg”比;
& lt;/audio>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
音乐:{
isPlay:假的,
currentTime: 0,
maxTime: 0,
体积:100
}
}
},
安装(){
美元。nextTick(()=祝辞{
setInterval (this.listenMusic, 1000)
})
},
方法:{
listenMusic () {
如果(!这。refs.music美元){
返回
}
如果(这一点。refs.music.readyState美元){
this.music。maxTime=refs.music.duration美元
}
this.music.isPlay=!这refs.music.paused美元
this.music。currentTime=refs.music.currentTime美元
},
玩(){
如果(这一点。refs.music.paused美元){
refs.music.play美元。()
其他}{
refs.music.pause美元。()
}
this.music.isPlay=!这refs.music.paused美元
美元。nextTick(()=祝辞{
. getelementbyid('玩').blur ()
})
},
changeTime(时间){
refs.music美元。currentTime=时间
},
changeVolume (v) {
this.music。体积v +=如果(this.music.volume> 100) {
this.music。体积=100
}
如果(this.music.volume<0) {
this.music。体积=0
}
refs.music美元。体积=this.music.volume/100
},
formatTime(时间){
让它=方法(时间)
让m=方法(/60)
让s=方法(% 60)
返回(m<10 & # 63; " 0 ": " ") +方法(它/60)+“:”+ (s<& # 63; " 0 ": " ") +方法(% 60)
}
}
}
& lt;/script>
以上所述是小编给大家介绍的基于vue-element组件实现音乐播放器功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留的言,小编会及时回复大家的!
