基于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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
Aug 04 Javascript
js数组的操作指南
Dec 28 Javascript
jQuery实现友好的轮播图片特效
Jan 12 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
Vue.use源码分析
Apr 22 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
js实现时钟定时器
Mar 26 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
php生成扇形比例图实例
2013/11/06 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
zookeeper python接口实例详解
2018/01/18 Python
Python 占位符的使用方法详解
2019/07/10 Python
python绘制规则网络图形实例
2019/12/09 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
工作疏忽检讨书
2014/01/25 职场文书
秋季红领巾广播稿
2014/01/27 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
庆祝国庆节标语
2014/10/09 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
2014年纳税评估工作总结
2014/12/23 职场文书
天河观后感
2015/06/11 职场文书
小学校园广播稿
2015/08/18 职场文书
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python