基于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 相关文章推荐
让你的网站可编辑的实现js代码
Oct 19 Javascript
js的回调函数详解
Jan 05 Javascript
Java File类的常用方法总结
Mar 18 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
js实现从左向右滑动式轮播图效果
Jul 07 Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 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提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
基于python的字节编译详解
2017/09/20 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
python做反被爬保护的方法
2019/07/01 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
strlen的几种不同实现方法
2013/05/31 面试题
年度考核评语
2014/01/19 职场文书
年终考核实施方案
2014/05/26 职场文书
篮球赛口号
2014/06/18 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
员工考勤管理制度
2015/08/06 职场文书
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android