基于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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
Oct 25 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
基于JavaScript实现飘落星星特效
Aug 10 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
vue-cli3单页构建大型项目方案
Apr 07 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
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
修改php.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
laravel 数据验证规则详解
2019/10/23 PHP
js异或加解密效果代码
2008/06/25 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
CSS3属性选择符介绍
2008/10/17 HTML / CSS
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
华为C++笔试题
2014/08/05 面试题
服务员岗位职责
2014/01/29 职场文书
美食节策划方案
2014/05/26 职场文书
通信工程专业求职信
2014/06/04 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书