基于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中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
JavaScript初学者必看“new”
Jun 12 Javascript
微信小程序自定义组件
Aug 16 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
vue实现简单加法计算器
Oct 22 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作的文本留言本的例子(二)
2006/10/09 PHP
PHP实现MVC开发得最简单的方法――模型
2007/04/10 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
PHP中header用法小结
2016/05/23 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
js中关于String对象的replace使用详解
2011/05/24 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
CentOS中升级Python版本的方法详解
2017/07/10 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
神经网络python源码分享
2017/12/15 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
Sanic框架路由用法实例分析
2018/07/16 Python
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
员工工作能力评语
2014/12/31 职场文书
房产证明范本
2015/06/19 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
介绍信应该怎么开?
2019/04/03 职场文书