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


Posted in Javascript onMay 06, 2018

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

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

效果

基于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组件实现音乐播放器功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jquery 模式对话框终极版实现代码
Sep 28 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
jqeury-easyui-layout问题解决方法
Mar 24 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
JavaScript之解构赋值的理解
Jan 30 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
基于JavaScript获取base64图片大小
Oct 18 Javascript
VueJs组件之父子通讯的方式
May 06 #Javascript
vue自动化表单实例分析
May 06 #Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 #Javascript
JS中this的指向以及call、apply的作用
May 06 #Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 #Javascript
Less 安装及基本用法
May 05 #Javascript
es6新特性之 class 基本用法解析
May 05 #Javascript
You might like
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
将string解析为json的几种方式小结
2010/11/11 Javascript
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
vue实现二级导航栏效果
2019/10/19 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
python3实现windows下同名进程监控
2018/06/21 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
会计岗位职责
2013/11/08 职场文书
大学生学习自我评价
2014/01/13 职场文书
留学推荐信怎么写
2014/01/25 职场文书
幼儿教师工作感言
2014/02/14 职场文书
家具促销活动方案
2014/02/16 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
普通党员整改措施
2014/10/24 职场文书
信访工作汇报材料
2014/10/27 职场文书
酒店员工手册范本
2015/05/14 职场文书
教师调动申请报告
2015/05/18 职场文书
员工聘用合同范本
2015/09/21 职场文书
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis