➜ 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/, 看到如下界面,说明项目初始化成功
5.1. 安装ElementUI并插入audio标签
5.1.1. 安装ElementUI
yarn add element-ui // or npm i element-ui -S
5.1.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 }
})
1. 简介
1.1. 相关技术
1.2. 从本教程你会学到什么?
Vue单文件组件开发知识
Element UI基本用法
Audio原生API及Audio相关事件
音频播放器的基本原理
音频的播放暂停控制
更新音频显示时间
音频进度条控制与跳转
音频音量控制
音频播放速度控制
音频静音控制
音频下载控制
个性化配置与排他性播放
一点点ES6语法
2. 学前准备
基本上不需要什么准备,但是如果你能先看一下Aduio相关API和事件将会更好
3. 在线demon
没有在线demo的教程都是耍流氓
4. 开始编码
5. 项目初始化
浏览器打开
http://localhost:8080/
, 看到如下界面,说明项目初始化成功5.1. 安装ElementUI并插入audio标签
5.1.1.
安装ElementUI
5.1.2. 在
src/main.js
中引入Element UI5.1.3. 创建
src/components/VueAudio.vue
5.1.4. 修改
src/App.vue
, 并引入VueAudio.vue
组件打开:http://localhost:8080/,你应该能看到如下效果,说明引入成功,你可以点击播放按钮看看,音频是否能够播放
5.2. 音频的播放暂停控制
我们需要用一个按钮去控制音频的播放与暂停,这里调用了audio的两个api,以及两个事件
修改
src/components/VueAudio.vue
5.3. 音频显示时间
音频的时间显示主要有两部分,音频的总时长和当前播放时间。可以从两个事件中获取
loadedmetadata
:代表音频的元数据已经被加载完成,可以从中获取音频总时长timeupdate
: 当前播放位置作为正常播放的一部分而改变,或者以特别有趣的方式,例如不连续地改变,可以从该事件中获取音频的当前播放时间,该事件在播放过程中会不断被触发
要点代码
:整数格式化成时:分:秒要点代码
: 两个事件的处理完整代码
打开浏览器可以看到,当音频播放时,当前时间也在改变。
5.4. 音频进度条控制
进度条主要有两个控制,改变进度的原理是:改变
audio.currentTime
属性值5.5. 音频音量控制
音频的音量控制和进度控制差不多,也是通过拖动滑动条,去修改
aduio.volume
属性值,此处不再啰嗦5.6. 音频播放速度控制
音频播放速度控制和进度控制差不多,也是点击按钮,去修改
aduio.playbackRate
属性值,该属性代表音量的大小,取值范围是0 - 1,用滑动条的时候,也是需要换算一下值,此处不再啰嗦5.7. 音频静音控制
静音的控制是点击按钮,去修改
aduio.muted
属性,该属性有两个值: true(静音),false(不静音)。 注意,静音的时候,音频的进度条还是会继续往前走的。5.8. 音频下载控制
音频下载是一个a链接,记得加上
download
属性,不然浏览器会在新标签打开音频,而不是下载音频5.9. 个性化配置
音频的个性化配置有很多,大家可以自己扩展,通过父组件传递响应的值,可以做到个性化设置。
例如父组件这样
5.10. 一点点ES6语法
大多数时候,我们希望页面上播放一个音频时,其他音频可以暂停。
[...audios]
可以把一个类数组转化成数组,这个是我常用的。5.11. 完成后的文件
6. 感谢