Vue+ElementUI: 手把手教你做一个audio组件

最新推荐文章于 2024-09-16 21:23:59 发布
最新推荐文章于 2024-09-16 21:23:59 发布
阅读量3k 收藏 13
点赞数
文章标签： javascript ui webpack ViewUI
原文链接：https://segmentfault.com/a/1190000012453975
版权

目的

  • 本项目的目的是教你如何实现一个简单的音乐播放器（这并不难）
  • 本项目并不是一个可以用于生产环境的element播放器，所以并没有考虑太多的兼容性问题
  • 本项目不是ElementUI的一个音频插件，只是一个教程，不过你可以自行扩展实现
  • 本项目只是为了学习audio相关事件以及API

本项目的音频文件是位于static/falling-star.mp3，歌曲名为：星球坠落Live 艾热、李佳隆

运行

cd element-aduio && yarn && yarn run dev

文档

1. 简介

1.1 相关技术

1.2 从本教程你会学到什么？

  • Vue单文件组件开发知识
  • Element UI基本用法
  • Audio原生API及Audio相关事件
  • 音频播放器的基本原理
  • 音频的播放暂停控制
  • 音频显示时间
  • 音频进度条控制与跳转
  • 音频音量控制
  • 音频播放速度控制
  • 音频静音控制
  • 音频下载控制
  • 个性化配置与排他性播放
  • 一点点ES6语法

1.3 学前准备

基本上不需要什么准备，但是如果你能先看一下Aduio相关API和事件将会更好

1.4 在线demo

没有在线demo的教程都是耍流氓

2 开始编码

2.1 项目初始化

➜  test vue init webpack element-audio

  A newer version of vue-cli is available.

  latest:    2.9.2
  installed: 2.9.1

? Project name element-audio
? Project description A Vue.js project
? Author wangdd <wangdd@xxxxxx.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

➜  test cd element-audio 
➜  element-audio npm run dev

浏览器打开 http://localhost:8080/, 看到如下界面，说明项目初始化成功

图片1

2.2 安装ElementUI并插入audio标签

2.2.1 安装ElementUI 

yarn add element-ui // or npm i element-ui -S

2.2.2 在src/main.js中引入Element UI

// filename: src/main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import App from './App'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

2.2.3 创建src/components/VueAudio.vue 

// filename: src/components/VueAudio.vue
<template>
  <div>
    <audio src="http://devtest.qiniudn.com/secret base~.mp3" controls="controls"></audio>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  }
}
</script>

<style>

</style>

2.2.4 修改src/App.vue, 并引入VueAudio.vue组件

// filename: src/App.vue
<template>
  <div id="app">
    <VueAudio />
  </div>
</template>

<script>
import VueAudio from './components/VueAudio'

export default {
  name: 'app',
  components: {
    VueAudio
  },
  data () {
    return {}
  }
}
</script>

<style>

</style>

打开：http://localhost:8080/，你应该能看到如下效果，说明引入成功，你可以点击播放按钮看看，音频是否能够播放
图2

2.3 音频的播放暂停控制

我们需要用一个按钮去控制音频的播放与暂停，这里调用了audio的两个api,以及两个事件

  • audio.play()
  • audio.pause()
  • play事件
  • pause事件

修改src/components/VueAudio.vue

// filename: src/components/VueAudio.vue
<template>
  <div>
    <!-- 此处的ref属性，可以很方便的在vue组件中通过 this.$refs.audio获取该dom元素 -->
    <audio ref="audio" 
    @pause="onPause"
    @play="onPlay"
    src="http://devtest.qiniudn.com/secret base~.mp3" controls="controls"></audio>

    <!-- 音频播放控件 -->
    <div>
      <el-button type="text" @click="startPlayOrPause">{{audio.playing | transPlayPause}}</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      audio: {
        // 该字段是音频是否处于播放状态的属性
        playing: false
      }
    }
  },
  methods: {
    // 控制音频的播放与暂停
    startPlayOrPause () {
      return this.audio.playing ? this.pause() : this.play()
    },
    // 播放音频
    play () {
      this.$refs.audio.play()
    },
    // 暂停音频
    pause () {
      this.$refs.audio.pause()
    },
    // 当音频播放
    onPlay () {
      this.audio.playing = true
    },
    // 当音频暂停
    onPause () {
      this.audio.playing = false
    }
  },
  filters: {
    // 使用组件过滤器来动态改变按钮的显示
    transPlayPause(value) {
      return value ? '暂停' : '播放'
    }
  }
}
</script>

<style>

</style>

图3 音频播放与暂停

2.4 音频显示时间

音频的时间显示主要有两部分，音频的总时长和当前播放时间。可以从两个事件中获取

  • loadedmetadata:代表音频的元数据已经被加载完成，可以从中获取音频总时长
  • timeupdate: 当前播放位置作为正常播放的一部分而改变，或者以特别有趣的方式，例如不连续地改变，可以从该事件中获取音频的当前播放时间，该事件在播放过程中会不断被触发

要点代码：整数格式化成时:分:秒

function realFormatSecond(second) {
  var secondType = typeof second

  if (secondType === 'number' || secondType === 'string') {
    second = parseInt(second)

    var hours = Math.floor(second / 3600)
    second = second - hours * 3600
    var mimute = Math.floor(second / 60)
    second = second - mimute * 60

    return hours + ':' + ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
  } else {
    return '0:00:00'
  }
}

要点代码： 两个事件的处理

// 当timeupdate事件大概每秒一次，用来更新音频流的当前播放时间
onTimeupdate(res) {
      console.log('timeupdate')
      console.log(res)
      this.audio.currentTime = res.target.currentTime
    },
// 当加载语音流元数据完成后，会触发该事件的回调函数
// 语音元数据主要是语音的长度之类的数据
onLoadedmetadata(res) {
  console.log('loadedmetadata')
  console.log(res)
  this.audio.maxTime = parseInt(res.target.duration)
}

完整代码

<template>
  <div>
    <!-- 此处的ref属性，可以很方便的在vue组件中通过 this.$refs.audio获取该dom元素 -->
    <audio ref="audio" 
    @pause="onPause"
    @play="onPlay"
    @timeupdate="onTimeupdate" 
    @loadedmetadata="onLoadedmetadata"
    src="http://devtest.qiniudn.com/secret base~.mp3" controls="controls"></audio>

    <!-- 音频播放控件 -->
    <div>
      <el-button type="text" @click="startPlayOrPause">{{audio.playing | transPlayPause}}</el-button>

      <el-tag type="info">{{ audio.currentTime | formatSecond}}</el-tag>

      <el-tag type="info">{{ audio.maxTime | formatSecond}}</el-tag>
    </div>
  </div>
</template>

<script>

// 将整数转换成 时：分：秒的格式
function realFormatSecond(second) {
  var secondType = typeof second

  if (secondType === 'number' || secondType === 'string') {
    second = parseInt(second)

    var hours = Math.floor(second / 3600)
    second = second - hours * 3600
    var mimute = Math.floor(second / 60)
    second = second - mimute * 60

    return hours + ':' + ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
  } else {
    return '0:00:00'
  }
}

export default {
  data () {
    return {
      audio: {
        // 该字段是音频是否处于播放状态的属性
        playing: false,
        // 音频当前播放时长
        currentTime: 0,
        // 音频最大播放时长
        maxTime: 0
      }
    }
  },
  methods: {
    // 控制音频的播放与暂停
    startPlayOrPause () {
      return this.audio.playing ? this.pause() : this.play()
    },
    // 播放音频
    play () {
      this.$refs.audio.play()
    },
    // 暂停音频
    pause () {
      this.$refs.audio.pause()
    },
    // 当音频播放
    onPlay () {
      this.audio.playing = true
    },
    // 当音频暂停
    onPause () {
      this.audio.playing = false
    },
    // 当timeupdate事件大概每秒一次，用来更新音频流的当前播放时间
    onTimeupdate(res) {
      console.log('timeupdate')
      console.log(res)
      this.audio.currentTime = res.target.currentTime
    },
    // 当加载语音流元数据完成后，会触发该事件的回调函数
    // 语音元数据主要是语音的长度之类的数据
    onLoadedmetadata(res) {
      console.log('loadedmetadata')
      console.log(res)
      this.audio.maxTime = parseInt(res.target.duration)
    }
  },
  filters: {
    // 使用组件过滤器来动态改变按钮的显示
    transPlayPause(value) {
      return value ? '暂停' : '播放'
    },
    // 将整数转化成时分秒
    formatSecond(second = 0) {
      return realFormatSecond(second)
    }
  }
}
</script>

<style>

</style>

打开浏览器可以看到，当音频播放时，当前时间也在改变。
图4

2.5 音频进度条控制

进度条主要有两个控制，改变进度的原理是：改变audio.currentTime属性值

  • 音频播放后，当前时间改变，进度条就要随之改变
  • 拖动进度条，可以改变音频的当前时间
// 进度条ui
<el-slider v-model="sliderTime" :format-tooltip="formatProcessToolTip" @change="changeCurrentTime" class="slider"></el-slider>

// 拖动进度条，改变当前时间，index是进度条改变时的回调函数的参数0-100之间，需要换算成实际时间
changeCurrentTime(index) {
  this.$refs.audio.currentTime = parseInt(index / 100 * this.audio.maxTime)
},
// 当音频当前时间改变后，进度条也要改变
onTimeupdate(res) {
  console.log('timeupdate')
  console.log(res)
  this.audio.currentTime = res.target.currentTime
  this.sliderTime = parseInt(this.audio.currentTime / this.audio.maxTime * 100)
},

// 进度条格式化toolTip
formatProcessToolTip(index = 0) {
  index = parseInt(this.audio.maxTime / 100 * index)
  return '进度条: ' + realFormatSecond(index)
},

2.6 音频音量控制

音频的音量控制和进度控制差不多，也是通过拖动滑动条，去修改aduio.volume属性值，此处不再啰嗦

2.7 音频播放速度控制

音频的音量控制和进度控制差不多，也是点击按钮，去修改aduio.playbackRate属性值，该属性代表音量的大小，取值范围是0 - 1，用滑动条的时候，也是需要换算一下值，此处不再啰嗦

2.8 音频静音控制

静音的控制是点击按钮，去修改aduio.muted属性，该属性有两个值: true(静音)，false(不静音)。 注意，静音的时候，音频的进度条还是会继续往前走的。

2.9 音频下载控制

音频下载是一个a链接，记得加上download属性，不然浏览器会在新标签打开音频，而不是下载音频

<a :href="url" v-show="!controlList.noDownload" target="_blank" class="download" download>下载</a>

2.10 个性化配置

音频的个性化配置有很多，大家可以自己扩展，通过父组件传递响应的值，可以做到个性化设置。

 controlList: {
  // 不显示下载
  noDownload: false,
  // 不显示静音
  noMuted: false,
  // 不显示音量条
  noVolume: false,
  // 不显示进度条
  noProcess: false,
  // 只能播放一个
  onlyOnePlaying: false,
  // 不要快进按钮
  noSpeed: false
}

setControlList () {
    let controlList = this.theControlList.split(' ')
    controlList.forEach((item) => {
      if(this.controlList[item] !== undefined){
        this.controlList[item] = true
      }
    })
},

例如父组件这样

<template>
  <div id="app">
    <div v-for="item in audios" :key="item.url">
      <VueAudio :theUrl="item.url" :theControlList="item.controlList"/>
    </div>
  </div>
</template>

<script>
import VueAudio from './components/VueAudio'

export default {
  name: 'app',
  components: {
    VueAudio
  },
  data () {
    return {
      audios: [
        {
          url: 'http://devtest.qiniudn.com/secret base~.mp3',
          controlList: 'onlyOnePlaying'
        },
        {
          url: 'http://devtest.qiniudn.com/回レ！雪月花.mp3',
          controlList: 'noDownload noMuted onlyOnePlaying'
        },{
          url: 'http://devtest.qiniudn.com/あっちゅ～ま青春!.mp3',
          controlList: 'noDownload noVolume noMuted onlyOnePlaying'
        },{
          url: 'http://devtest.qiniudn.com/Preparation.mp3',
          controlList: 'noDownload noSpeed onlyOnePlaying'
        }
      ]
    }
  }
}
</script>

<style>

</style>

2.11 一点点ES6语法

大多数时候，我们希望页面上播放一个音频时，其他音频可以暂停。
[...audios]可以把一个类数组转化成数组，这个是我常用的。

onPlay (res) {
    console.log(res)
    this.audio.playing = true
    this.audio.loading = false
    
    if(!this.controlList.onlyOnePlaying){
      return 
    }
    
    let target = res.target
    
    let audios = document.getElementsByTagName('audio');
    // 如果设置了排他性，当前音频播放是，其他音频都要暂停
    [...audios].forEach((item) => {
      if(item !== target){
        item.pause()
      }
    })
},

感谢

  • 如果你需要一个小型的vue音乐播放器，你可以试试vue-aplayer, 该播放器不仅仅支持vue组件，非Vue的也支持，你可以看看他们的demo

参考文档

扫码订阅我的微信公众号：洞香春天。每天一篇技术短文，让知识不再高冷。

weixin_34417183
关注
vueAudiocustomStylepalyer一个audio标签自定义样式的vue组件
08-10
vueAudio-customStyle-palyer, 一个audio标签自定义样式的vue组件
vue-AudioComponent 音频播放组件
xiaokai123_的博客
10-14 4105
本文参考https://blog.csdn.net/weixin_40404336/article/details/84570070 感谢上面博主分享，为了方便前端开发人员查阅，提供新的连接。~_~. 下面代码有个细节，slider滑块这里采用的vant，原理同上。 定义vue 文件 :vueAudio.vue,代码内容如下：（引用代码后，在其他页面导入该组件即可，不懂的可以看上面博主分享...
element UI使用html的audio播放音频
最新发布
daxiashangxian的博客
09-16 408
【代码】element UI使用html的audio播放音频。
Vue中使用js-audio-recorder插件实现录音功能并实现上传Blob数据到SpringBoot后台接口
热门推荐
BADAO_LIUMANG_QIZHI的博客
09-20 1万+
浏览器web端实现语音消息录制并在录制结束之后将其上传到后台接口。在上面的基础上，搭建前后端的架构。
Vue自定义封装音频播放组件（带拖拽进度条）(改版)
m0_45858045的博客
07-04 556
vue 封装音频组件播放器
vue项目pc端的audio组件--vue-audio
huanhuan03的博客
07-29 3569
vue-audio
【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)
03-01
【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用 【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用 【vue+leaflet+elementUI】vue项目中在...
Java毕业设计-基于SpringBoot+Vue+ElementUI 前后端分离的人力资源管理系统（源码+数据库脚本）.zip
07-08
UI库：选择ElementUI作为UI库，它是一套基于Vue的组件库，提供了丰富的UI组件，可快速构建美观的用户界面。 2. 后端开发 使用SpringBoot来实现后端功能，包括数据库操作、权限管理、接口设计等。以下是一个示例代码...
基于SpringBoot+Vue+ElementUI的人事管理系统
01-12
《构建基于SpringBoot+Vue+ElementUI的人事管理系统》 在现代企业信息化管理中，人事管理系统扮演着至关重要的角色，它能有效提升人力资源管理效率，规范工作流程，降低运营成本。本文将详细介绍如何利用SpringBoot...
vue+elementUI管理系统页面源代码
02-12
总的来说，这个“vue2+elementUI后台管理系统”项目是一个完整的前端解决方案，结合Vue.js的灵活性、Element UI的美观组件和Vue Router的路由管理，可以快速构建出功能完善的后台管理系统。开发者只需导入项目，根据...
vue-elementui-3：三，vue + ElementUI开发后台管理模板—功能，资源，大量组件
02-17
vue-elementui-3 的代码 更多 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
vue-audio-visual-Vue HTML5音频可视化组件。-Vue.js开发
05-27
vue视听Vue HTML5音频可视化组件概述安装和设置API通用道具AvLine道具AvBars道具AvCircle道具AvWavef vue视听Vue HTML5音频可视化组件概述安装和设置API常用道具AvLine道具AvBars道具AvCircle道具AvWaveform道具AvMedia props发行许可证概述用于VueJS框架的音频可视化工具插件。 它使用HTML5 Web Audio API构建，并且与所有支持HTML5音频API的浏览器兼容。 它提供了多个Vue组件，这些组件允许为“音频” HTML元素绘制光亮的外观。 有一个DEMO ava
vue-audio-better-易于为Vue 2.x创建自定义音频播放器组件。 有灵魂的进度条。-Vue.js开发
05-27
vue-audio-better Easy to create custom audio player components for Vue.js. 一个有灵魂的进度条。 A progress bar with soul. 简单、有趣的 audio 组件，非常感谢您的 star! Simple, f vue-audio-better Easy to create custom audio player components for Vue.js. 一个有灵魂的进度条。 A progress bar with soul. 简单、有趣的 audio 组件，非常感谢您的 star! Simple, fun audio components, Thank you for your star! Overview Normal Mini Installation npm install vue-audio-better --save Update Add a mini audio component. Setup Bundl
基于vue2的音频播放器插件功能简单但是使用也简单可以自定义样式扩展也容易
08-10
基于vue2的音频播放器插件,功能简单,但是使用也简单,可以自定义样式,扩展也容易
VUE3开箱即用的音频播放组件（基于原生audio）
cute_ming的博客
08-09 2128
注：我是使用unocss语法来编写css 如果项目没有搭载unocss 将其相应的转换为css即可。
vue3 + Element Plus自定义音频audio样式及控件
qdm13209211861的博客
06-13 6869
先封装一个组件。注意：需提前安装了。
vue自写的audio播放组件
成的博客
07-03 4409
<template> <div class="audioProgress"> <div class="audio-controls"> ![上一课]() <div v-if="!isPlay"> ![播放]() </div> <div v-else-if...
vue 音频组件
shykevin的博客
01-14 1867
一、概述 因项目要求，需要做一个音频播放器。 二、demo test.vue <template> <div> <img src="../assets/audio-bg.png" alt=""> <br> <!-- 此处的ref属性，可以很方便的在vue组件中通过 this.$refs.audio获取该dom元素...
Vue实现自定义音频播放器组件
dss0225的博客
12-07 4483
Vue实现自定义组件音频播放组件
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值