基于howlerjs的简易音频播放器

介绍

支持连续播放的简易 MP3/Wav 音频播放器，基于 howler.js 实现

效果示意

见地址：https://zhangxinxu.gitee.io/howlerjs-player/

使用说明

引入 ui-audio.js

<script type="module" src="./src/ui-audio.js"></script>

此时就可以使用 <ui-audio> 元素进行音频播放处理了。

<ui-audio src="your.mp3" controls></ui-audio>

API文档

支持几乎所有 HTML <audio> 元素支持的 API。

HTML 属性

loop

支持值 0, 1, 2，分别表示顺序播放，随机播放和循环播放。如果不设置，音频播放完毕即停止，也不会显示播放顺序设置按钮。

muted

布尔属性值，表示是否静音。

controls

是否显示音频控制器。

src

当前播放的音频地址。

prevsrc

上一个播放的音频地址。如果不设置，不显示上一个播放按钮，如果是空字符串或者是 'none'，上一个播放按钮则禁用。

nextvsrc

下一个播放的音频地址。如果不设置，不显示下一个播放按钮，如果是空字符串或者是 'none'，下一个播放按钮则禁用。

type

音频播放的类型。和原生的 type 属性不同，这里只需要后缀名称即可，无需指定mime type，一般用在 src 地址没有暴露音频文件后缀的场景下。

label

标签提示信息，一般用来显示当前播放音频的名称或者描述。如果不设置，则不显示对应元素。

mode

当前播放的音频模式，支持 'webapi' 和 'html5' 两种方式，默认是 webapi，如果希望使用 html5 播放，可以设置 mode="html5"，一般音频文件比较大，或者希望音频边下载边播放的时候使用 html5 模式。

JS 属性

以上 HTML 属性均可以直接从 DOM 对象上设置或获取，例如：

const audio = document.querySelector('ui-audio');
// 获取
console.log(audio.loop);
// 设置
audio.muted = false;

而下面这些属性只能通过 DOM 对象进行设置。

currentTime

当前播放的时间。

volume

当前的音量，范围0-1。

playbackRate

用来设置或获取当前媒体文件的播放速率，值为数值。

paused

当前音频是否暂停中。

方法

play()

音频播放。

pause()

音频暂停。

stop()

音频停止，播放点会回到 0。

prev()

播放前一个音频。

next()

播放下一个音频。

state()

返回当前音频的状态，值包括：'unready', 'unloaded', 'loading', 'loaded'

load()

触发音频文件的加载。

unload()

音频文件的卸载，会停止播放音频，并释放内存。

事件

play

播放时触发。

pause

暂停时触发。

load

加载完毕触发。

end

播放完毕触发，如果是单曲循环，则每次播放结束都会执行一次。

stop

播放停止触发。

seek

改变播放的位置时候触发，例如点击或拖动进度条。

playing

当前正在播放的时候触发，每秒执行约 60 次。

error

加载或播放错误的时候触发，错误类型通过 event.detail 获取。

audio.addEventListener('pause', function () {
    // 暂停啦...
});

更多信息参见：https://www.zhangxinxu.com/wordpress/?p=10349