基于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获取iframe中的dom对象(两种方法)
Jul 02 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
编写一个javascript元循环求值器的方法
Apr 14 Javascript
详解Vue的列表渲染
Nov 20 Vue.js
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调用三种数据库的方法(1)
2006/10/09 PHP
PHP 压缩文件夹的类代码
2009/11/05 PHP
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
解析php中如何直接执行SHELL
2013/06/28 PHP
php中session退出登陆问题
2014/02/27 PHP
php数组分页实现方法
2016/04/30 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
JS 实现完美include载入实现代码
2010/08/05 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
Python的词法分析与语法分析
2013/05/18 Python
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
Python切片知识解析
2016/03/06 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
Python中enumerate函数代码解析
2017/10/31 Python
python实现简单五子棋游戏
2019/06/18 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
拓展培训心得体会
2014/01/04 职场文书
新学期家长寄语
2014/01/19 职场文书
中文教师求职信
2014/02/22 职场文书
2014年公司迎新年活动方案
2014/02/24 职场文书
体育运动口号
2014/06/09 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
民主生活会主持词
2015/07/01 职场文书
Golang 遍历二叉树
2022/04/19 Golang