🍭 Wow, such a beautiful HTML5 music player

APlayer 是采用 MIT 许可的开源项目,它是一个智能的音乐播放器

使用

在 HTML 中写入:

1
2
3
<link rel="stylesheet" href="[APlayer.min.css]">
<div id="aplayer"></div>
<script src="[APlayer.min.js]"></script>

在 JS 中写入:

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'
}]
});

参数

名称 默认值 描述
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

举例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const ap = new APlayer({
container: document.getElementById('aplayer'),
mini: false,
autoplay: false,
theme: '#FADFA3',
loop: 'all',
order: 'random',
preload: 'auto',
volume: 0.7,
mutex: true,
listFolded: false,
listMaxHeight: 90,
lrcType: 3,
audio: [
{
name: 'name1',
artist: 'artist1',
url: 'url1.mp3',
cover: 'cover1.jpg',
lrc: 'lrc1.lrc',
theme: '#ebd0c2'
},
{
name: 'name2',
artist: 'artist2',
url: 'url2.mp3',
cover: 'cover2.jpg',
lrc: 'lrc2.lrc',
theme: '#46718b'
}
]
});

使用MetingJS

如果你觉得上面的一个一个音频设置过于麻烦,还可以使用 MetingJS

1
2
3
4
5
6
7
8
9
10
11
<!-- 导入 APlayer -->
<link rel="stylesheet" href="APlayer.min.css">
<script src="APlayer.min.js"></script>
<!-- 导入 MetingJS -->
<script src="Meting.min.js"></script>

<meting-js
server="netease"
type="playlist"
id="number">
</meting-js>

上面的导入相信大家都看的懂,下面的标签大概意思是从音乐网站导入歌单

server: 音乐网站,MetingJS目前支持 ‘netease’, ‘tencent’, ‘xiami’
type: song, playlist, album, search, artist
id: 歌曲、歌单的 ID

MetingJS 使用举例

如果你想和我一样,在音乐室中加入网易云音乐热歌榜,可以像我这样写👇

1
2
3
4
5
6
<meting-js
server="netease"
type="playlist"
id="3778678">
</meting-js>
<!-- 网易云的热歌榜上写的类型是toplist,但实际也是一个playlist,其ID为3778678,每周四更新,ID不变 -->

MetingJS 还会对有歌词的音乐自动添加歌词在Aplayer中


CDN

  • Aplayer.min.css
    • https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css
  • Aplayer.min.js
    • https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js
  • Meting.min.js
    • https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js