基于vue-element组件实现音乐播放器功能

最近在写一个基于 github-page 和 gist 的博客, 想加个音乐播放器, 做了一个早上, 发出来分享一下

演示地址 https://github-laziji.github.io

效果

使用到的组件

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组件实现音乐播放器功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

您可能感兴趣的文章:

  • 详解如何在vue项目中引入elementUI组件
  • 在vue项目中使用element-ui的Upload上传组件的示例
  • Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
  • 利用vue+elementUI实现部分引入组件的方法详解
  • VUE element-ui 写个复用Table组件的示例代码
  • 详解从新建vue项目到引入组件Element的方法
时间: 2018-05-04

详解如何在vue项目中引入elementUI组件

前提:已经安装好Vue 初始化vue vue init webpack itemname 运行初始化demo 运行一下初始后的demo,如果没有问题则进行安装elementUI npm run dev 安装 elementUI npm i element-ui -S 引入elementUI 在main.js中引入elementUI import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vu

Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能

2017年底了,总结了这一年多来的前端之路,Vue从入门到放弃,再二进宫,从 Vue1.0 持续跟踪到 Vue2.5.结合公司的一些实际项目,也封装了一些比较实用的组件. 由于现在公司管理平台主要运用Element UI,索性就结合组件Table 和 Pagination 封装了一个支持页面切换的Table组件,不啰嗦,直接上代码. 2.实现思路 2.1.Element UI 引入(整体引入) main.js // Element UI import Element from 'element-

在vue项目中使用element-ui的Upload上传组件的示例

本文介绍了vue项目中使用element-ui的Upload上传组件的示例,分享给大家,具体如下: <el-upload v-else class='ensure ensureButt' :action="importFileUrl" :data="upLoadData" name="importfile" :onError="uploadError" :onSuccess="uploadSuccess&quo

利用vue+elementUI实现部分引入组件的方法详解

前言 vue.js的UI组件库,在git上有多个项目,我见的使用者比较多的是iView和Element.两个组件库,组件都很丰富. 官网的介绍 iView: 一套基于 Vue.js 的高质量 UI 组件库 Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型. 两者各有优缺点,不多评论,根据自己的需求,我最后使用了Element.因为最近公司开发一个很小的后台项目,所以考虑部分引入element的组件,因为第一次单独引入没有

详解从新建vue项目到引入组件Element的方法

本文介绍了从新建vue项目到引入组件Element以及Error when rendering component报错解决,分享给大家 一.新建项目 1.打开cmd,运行:vue init webpack Vue-Demo 2.运行:cd Vue-Demo进入这一级 3.运行:npm install 4.运行:npm run dev 如果浏览器打开之后,没有加载出页面,说明本地的8080 端口被占用,需要修改一下配置文件 config/index.js 解释:1.将 build 的路径前缀修改为

VUE element-ui 写个复用Table组件的示例代码

饿了么的table组件功能很强大,对于项目中的各种表格基本够用,但是--个人对于它以列为单位的操作不习惯 =.=所以改成了另一种方式(我不会告诉你其实本质没变). 项目中表格较多,所以复用性最重要 步骤一 先来个基本的表格展示 官例的tableData tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address:

Vue无限滑动周选择日期的组件的示例代码

之前在做一个手机端项目的时候,需要一个左右滑动(按周滑动)选择日期插件,而且当时这个项目没有用到Vue.当时又没有找到合适的第三方插件,就花了点时间用原生JavaScript写了出来,当时心中就想把它写成基于Vue的组件,这短时间闲了把它弄出来了!,在这个过程中遇到了一个坑,后面会提出来! 先看效果  思路 根据用户传入日期(不传默认今天),获取上一周,当周,下一周对应的日期放数组dates里 let vm = this this.dates.push( { date: moment(vm.de

解决Vue+Element ui开发中碰到的IE问题

IE9样式错乱,IE11无法正常加载v-loading等问题 引入了babel-polyfill插件,依然出现"polyfill-eventsource added missing EventSource to window"的奇怪问题(ie所有版本都有出现) 第一步:安装babel-ployfill (已安装请跳过此步骤) yarn add babel-ployfill 修改webpack打包配置文件:webpack.bash.conf.js // 引入babel-ployfill

Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义

本文为大家分享了Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义,供大家参考,具体内容如下 1.安装 npm install vue-quill-editor --save 2.在main.js中引入 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quil

Vue+Element UI+Lumen实现通用表格分页功能

前言 最近在做一个前后端分离的项目,前端使用 Vue+ Element UI,而后端则使用 Lumen 做接口开发,其中分页是必不可少的一部分,本文就介绍如何基于以上环境做一个简单.可复用的分页功能. 先说后端 后端做的事情不多,只需要接受几个参数,根据参数来获取数据即可. 需要获取的参数如下: pageSize(一页数据的数量) pageIndex(第几页的数据) 然后就可以根据这两个参数计算出偏移量,再从数据库中取出相应的数据. 假如现在给出的参数为:pageSize=10,pageInde

Vue + Element UI图片上传控件使用详解

上一篇 Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义 主要是写了富文本编辑器的自定义及编辑器中图片的上传并插入到编辑内容,这篇文章单独介绍一下element UI 图片上传控件的使用.首先要安装element并中引入,安装引入过程这里不再赘述. 1.引用element 上传控件. <el-upload action="/mgr/common/imgUpload"//这里需要配置一下文件上传地址(跨域) list-type=&qu

在vue+element ui框架里实现lodash的debounce防抖

事情起因在:我使用element ui框架里的远程搜索框,在单选时,组件内部已经做了防抖,query是在一段时间内的字符串.但是在多选时,并没有做防抖,而是每输入一个字符都要向后台发一次请求,所以必须防抖,官方推荐使用lodash的debounce 在解决这个问题时,我遇到的坎儿主要有以下: 我首先在项目里用npm安装lodash,先全局安装,然后安装到项目 npm install -g lodash npm install --save lodash 安装后,我就在我要用防抖的组件里,引入lo

解决vue+ element ui 表单验证有值但验证失败问题

一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item label="数据模板" prop="template" > <el-col :span="20"> <el-input type="textarea" v-model="form.template

开发Vue树形组件的示例代码

本文介绍了Vue树形组件的示例代码,分享给大家,具体如下: 使用SemanticUI和vue做一个menubar组件,实现方法大概是这样的: <template> <div class="ui menu"> <template v-for="item in leftItems"> <a " v-if="!item.children" @click="item.click"&g

vue不操作dom实现图片轮播的示例代码

本文介绍了vue不操作dom实现图片轮播的示例代码,分享给大家,具体如下: 效果 宽度为1190px且水平居中的轮播盒子: 中间是当前显示的默认尺寸图片: 左右两边是预显示的小尺寸图片: 轮播从右至左,图片逐渐放大. 做普通平滑轮播也可以参照这个思路 html <ul> <li v-for="(demo,index) in demoList" :key="index" :class="{'demo-left':demoStyle(inde