基于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 相关文章推荐
JavaScript生成的动态下雨背景效果实现方法
Feb 25 Javascript
JavaScript中的Function函数
Aug 27 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
mpvue开发音频类小程序踩坑和建议详解
Mar 12 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
Feb 07 Javascript
Vue通过懒加载提升页面响应速度
May 10 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
php数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
php防止SQL注入详解及防范
2013/11/12 PHP
详解js异步文件加载器
2016/01/24 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
haskell实现多线程服务器实例代码
2013/11/26 Python
python从入门到精通(DAY 1)
2015/12/20 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
赔偿协议书怎么写
2015/01/28 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
超市店长竞聘书
2015/09/15 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python