audio5js
#模块介绍
基于HTML5 <audio>标签进行Javascript功能封装，包括三个模块:
- 播放器
audio5.js - 歌单
list.js
#安装引入:
#NPM
安装：
npm install audio5js
引入：
Vue-cli示例：
import Audio5 from 'audio5js'
export default {
data(){
return{
Audio5
}
},
mounted(){
Audio5.init({
...
})
}
}#接口指南
插件初始化
#初始化
Audio5.init()传参：
Audio5.init({
// 容器
ele: document.body|DOM,
// 自动播放
autoplay: false|true,
// 预加载
preload: 'auto|metadate|none',
// 音量
volume: 0-1,
// 静音
muted: false|true,
// 播放速率
playbackRate: -1|0.5|1|2,
// 循环模式:单曲|顺序|随机|不循环
mode: 'single|list|random|none',
// 样式主题
theme: 'default|none',
// 播放列表切歌回调
cut:()=>{},
// 播放列表更新回调
change:()=>{},
})#方法：
Audio5:{
// 初始化
init,
// 播放器
play,
togPause,
next,
prev,
volume,
togMuted,
progress,
// 界面
togPlayer,
togList,
togLrc,
// 播放清单
get,
add,
replace,
remove,
}audio5.js ：对HTML5
<audio>属性和方法封装
#初始化
audio5.init()默认配置：
audio5.init({
// 容器
ele: document.body,
// 自动播放
autoplay: false,
// 预加载
preload: 'metadate',
// 音量
volume: 0.75,
// 静音
muted: true,
// 播放速率
playbackRate: 1,
// 播放器主题
theme: 'none',
})#载入
audio5.load(<{url}>)传入音频uri，若autoplay为true，自动播放
#播放/暂停
audio5.togPause()根据audio5.paused判断切换
#静音/非静音
audio5.togMuted()根据audio5.muted判断切换
#音量
audio5.volume(<num>)传入百分比num:<0-1>调节音量，并audio5.muted为false
#寻址
audio5.seekTo(<percent>)传入总时间长度百分比percent:<0-1>，跳转到指定播放帧
#重加载
audio5.reload()#获取Audio元信息
audio5.getMate()#事件绑定
audio5.on(<events>,function(){
...
})绑定原生audio事件
list.js : 增删改查,下一曲、上一曲、跳至(nextTo)、循环模式
#初始化
list.init()默认配置：
list.init({
// 容器
// ele: document.body,
// 循环模式
mode: 'list',
// 列表主题
theme: 'none',
// 列表切歌回调
cut:()=>{},
// 列表更新回调
change:()=>{},
})#获取列表
list.get([index])传参index获取单条，不传参获取列表
#新增
list.add(<{url,[singer,title,desc]}>)格式化默认{url:'地址',singer:'歌手',title:'歌名'，desc:'专辑描述'}
#删除
list.del(<index>)传参播放列表<数组>list下标
#调整序位
list.replace(<from>,<to>)根据播放列表<数组>list下标，调整位置，从下标from处移动到下标to处，可实现拖拽排序功能
#清空
list.clear()#下一曲
list.next()#上一曲
list.prev()#循环模式切换
list.mode(<'single'|'list'|'random'|'none'>)#事件绑定
list.on('cut|change',()=>{
...
})自定义事件绑定：方法next()、nextTo()、prev()触发切歌cut事件，；方法add()、del()、replace()、clear()触发更新列表change事件；其中del()若删除当前项(currentIndex)，会执行next()，触发cut事件
附录：HTML5 audio 部分相关属性、方法和事件
#属性
- 可设置或读取
| 属性 | 说明 | 示例 |
|---|---|---|
| autoplay | 就绪后自动播放 | autoplay='autoplay' |
| controls | 显示控件 | controls='controls' |
| loop | 重新开始播放 | loop='loop' |
| preload | 自动加载并预备播放，不自动播放 | `preload='auto |
| src | 播放音频的URL地址 | src="url" |
| currentTime | 当前播放位置 | currentTime=“秒” |
| muted | 是否关闭声音 | `muted="true |
| valume | 音量 | volume=0.8 |
| playbackRate | 速率 | `playbackRate=-1 |
| 属性 | 说明 | 示例 |
|---|---|---|
| paused | 暂停(并不能改变播放) | `paused="true |
- 只读
| 属性 | 说明 |
|---|---|
| currentSrc | 当前src |
| paused | 是否暂停 |
| durantion | 音频总长度(秒) |
| played | 已读的TimeRanges |
| ended | 是否结束 |
| error | 错误信息 |
| seekable | 可寻址的TimeRanges |
| seeking | 正在寻址 |
| networkState | 网络状态：0-未初始化，1-获取资源，2-下载中，3-未找到资源 |
| readyState | 准备状态：0-未准备，1-获取元数据，2-当前帧准备完成，3-下一帧准备完成，4-可以播放 |
#方法
| 方法 | 说明 | 示例 |
|---|---|---|
| canPlayType() | 检查播放类型 | |
| load() | (重)加载 | |
| play() | 播放 | |
| pause() | 暂停 | |
| fastSeek() | 指定时间 | |
| getStartDate() | 当前时间线偏移量 |
#事件
| 事件 | 说明 | 示例 |
|---|---|---|
| loadstart | 开始请求数据 | |
| onloadedmetadate | 元数据被加载 | |
| canplay | 缓冲完成 | |
| canplaythrough | 载入完成 | |
| play | play(),autoplay触发 | |
| playing | 缓存中，暂停播放 | |
| wating | 缓存中，等待播放 | |
| volumechange | 音量改变 | |
| progress | 正在播放，暂停不触发，间隔大 | |
| timeupdate | 播放时间改变时触发，暂停不触发，间隔小 | |
| pause | pause()触发 | |
| ended | 结束时 | |
| seeking | 正在寻址 | |
| seeked | 寻址 |