audio5js

HTML5 music plugin

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
audio5js
0.1.13 years ago3 years agoMinified + gzip package size for audio5js in KB

Readme

audio5js
img

模块介绍

基于HTML5 <audio>标签进行Javascript功能封装,包括三个模块:
  1. 播放器 audio5.js
  1. 歌单 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='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",只用于获取|
  • 只读
|属性|说明| |--|--| |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|寻址||