audio5js
模块介绍
基于HTML5 <audio>
标签进行Javascript功能封装,包括三个模块:
- 播放器
audio5.js
- 歌单
list.js
安装引入:
NPM
安装:
npm install audio5js
引入:
Vue-cli示例:
```js
import Audio5 from 'audio5js'
export default {
data(){
return{
Audio5
}
},
mounted(){
Audio5.init({
...
})
}
}
```
接口指南
插件初始化
初始化
```js
Audio5.init()
```
传参:
```js
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:()=>{},
})
```
方法:
```js
Audio5:{
// 初始化
init,
// 播放器
play,
togPause,
next,
prev,
volume,
togMuted,
progress,
// 界面
togPlayer,
togList,
togLrc,
// 播放清单
get,
add,
replace,
remove,
}
```
audio5.js :对HTML5
<audio>
属性和方法封装
初始化
```js
audio5.init()
```
默认配置:
```js
audio5.init({
// 容器
ele: document.body,
// 自动播放
autoplay: false,
// 预加载
preload: 'metadate',
// 音量
volume: 0.75,
// 静音
muted: true,
// 播放速率
playbackRate: 1,
// 播放器主题
theme: 'none',
})
```
载入
```js
audio5.load(<{url}>)
```
传入音频uri,若autoplay
为true,自动播放
播放/暂停
```js
audio5.togPause()
```
根据audio5.paused
判断切换
静音/非静音
```js
audio5.togMuted()
```
根据audio5.muted
判断切换
音量
```js
audio5.volume()
```
传入百分比num:<0-1>
调节音量,并audio5.muted
为false
寻址
```js
audio5.seekTo()
```
传入总时间长度百分比percent:<0-1>
,跳转到指定播放帧
重加载
```js
audio5.reload()
```
获取Audio元信息
```js
audio5.getMate()
```
事件绑定
```js
audio5.on(,function(){
...
})
```
绑定原生audio事件
list.js : 增删改查,下一曲、上一曲、跳至(nextTo)、循环模式
初始化
```js
list.init()
```
默认配置:
```js
list.init({
// 容器
// ele: document.body,
// 循环模式
mode: 'list',
// 列表主题
theme: 'none',
// 列表切歌回调
cut:()=>{},
// 列表更新回调
change:()=>{},
})
```
获取列表
```js
list.get(index)
```
传参index获取单条,不传参获取列表
新增
```js
list.add(<{url,singer,title,desc}>)
```
格式化默认{url:'地址',singer:'歌手',title:'歌名',desc:'专辑描述'}
删除
```js
list.del()
```
传参播放列表<数组>list
下标
调整序位
```js
list.replace(,)
```
根据播放列表<数组>list
下标,调整位置,从下标from
处移动到下标to
处,可实现拖拽排序功能
清空
```js
list.clear()
```
下一曲
```js
list.next()
```
上一曲
```js
list.prev()
```
循环模式切换
```js
list.mode(<'single'|'list'|'random'|'none'>)
```
事件绑定
```js
list.on('cut|change',()=>{
...
})
```
自定义事件绑定:方法next()
、nextTo()
、prev()
触发切歌cut
事件,;方法add()
、del()
、replace()
、clear()
触发更新列表change
事件;其中del()
若删除当前项(currentIndex
),会执行next()
,触发cut
事件
附录:HTML5 audio 部分相关属性、方法和事件
属性
- 可设置或读取
autoplay='autoplay'
|
|controls|显示控件|controls='controls'
|
|loop|重新开始播放|loop='loop'
|
|preload|自动加载并预备播放,不自动播放|preload='auto|metadate|none'
|
|src|播放音频的URL地址|src="url"
|
|currentTime|当前播放位置|currentTime=“秒”
|
|muted|是否关闭声音|muted="true|false"
|
|valume|音量|volume=0.8
|
|playbackRate|速率|playbackRate=-1|0.5|1|2
|
|属性|说明|示例|
|--|--|--|
|paused|暂停(并不能改变播放)|paused="true|false"
,只用于获取|
- 只读