欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-06 10:50:25
最近在写一个基于 github-page 和 gist 的博客, 想加个音乐播放器, 做了一个早上, 发出来分享一下 演示地址 效果 使用到的组件 eleme...

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

演示地址

效果

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

使用到的组件

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组件实现音乐播放器功能,希望对大家有所帮助