audio5js

    0.1.1 • Public • Published

    audio5js

    img

    #模块介绍

    基于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 部分相关属性、方法和事件

    #属性
    • 可设置或读取
    属性 说明 示例
    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 寻址

    Install

    npm i audio5js

    DownloadsWeekly Downloads

    0

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    134 kB

    Total Files

    9

    Last publish

    Collaborators

    • kikpin