简介：
APlayer 是一个可爱的 HTML5 音乐播放器。（官方原话）
地址：点击访问
安装
使用 npm:
1
| npm install aplayer --save
|
使用 Yarn:
使用
1
2
3
| <link rel="stylesheet" href="APlayer.min.css">
<div id="aplayer"></div>
<script src="APlayer.min.js"></script>
|
1
2
3
4
5
6
7
8
9
| const ap = new APlayer({
container: document.getElementById('aplayer'),
audio: [{
name: 'name',
artist: 'artist',
url: 'url.mp3',
cover: 'cover.jpg'
}]
});
|
使用模块管理器:
1
2
3
4
| import 'APlayer/dist/APlayer.min.css';
import APlayer from 'APlayer';
const ap = new APlayer(options);
|
参数介绍（可见官网）
| 名称 |
默认值 |
描述 |
| container |
document.querySelector('.aplayer') |
播放器容器元素 |
| fixed |
false |
开启吸底模式, 详情 |
| mini |
false |
开启迷你模式, 详情 |
| autoplay |
false |
音频自动播放 |
| theme |
'#b7daff' |
主题色 |
| loop |
'all' |
音频循环播放, 可选值: 'all', 'one', 'none' |
| order |
'list' |
音频循环顺序, 可选值: 'list', 'random' |
| preload |
'auto' |
预加载，可选值: 'none', 'metadata', 'auto' |
| volume |
0.7 |
默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效 |
| audio |
- |
音频信息, 应该是一个对象或对象数组 |
| audio.name |
- |
音频名称 |
| audio.artist |
- |
音频艺术家 |
| audio.url |
- |
音频链接 |
| audio.cover |
- |
音频封面 |
| audio.lrc |
- |
详情 |
| audio.theme |
- |
切换到此音频时的主题色，比上面的 theme 优先级高 |
| audio.type |
'auto' |
可选值: 'auto', 'hls', 'normal' 或其他自定义类型, 详情 |
| customAudioType |
- |
自定义类型，详情 |
| mutex |
true |
互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器 |
| lrcType |
0 |
详情 |
| listFolded |
false |
列表默认折叠 |
| listMaxHeight |
- |
列表最大高度 |
| storageName |
'aplayer-setting' |
存储播放器设置的 localStorage key |