audio5js v0.1.1

audio5js

#模块介绍

基于HTML5 <audio>标签进行Javascript功能封装，包括三个模块: 1. 播放器 audio5.js 2. 歌单 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 部分相关属性、方法和事件

#属性

• 可设置或读取

• 只读

#方法

#事件