DIYsay
日志7
标签15
分类2

给网站安装可爱的APlayer

音乐平台提供的插件体验极差,版权保护直接导致无法使用。
aplayerh1

前言

音乐平台提供的插件因版权保护无法生成外链,使用起来用户体验极差。推荐使用APlayer,体验非常棒!
此文已html页面举例,道理都是一样的。内容适合新手查看,并非进阶型
官方文档:https://aplayer.js.org/#/home

安装

使用 npm:

1
npm install aplayer --save

使用 Yarn:

1
yarn add aplayer

如果你有使用程序、框架搭建博客,请自行寻找对应插件,例如hexo:

1
$ npm install --save hexo-tag-aplayer

入门

首先你需要引用它的css和js(下载地址:https://github.com/MoePlayer/APlayer/tags):

1
2
<link rel="stylesheet" href="APlayer.min.css">
<script src="APlayer.min.js"></script>

当然,你也可以使用它的外链(具体查看本文CDN栏目):

1
2
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>

通过DIV显示它:

1
<div id="aplayer"></div>

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

参数说明

名称默认值描述
containerdocument.querySelector('.aplayer')播放器容器元素
fixedfalse开启吸底模式, 详情
minifalse开启迷你模式, 详情
autoplayfalse音频自动播放
theme'#b7daff'主题色
loop'all'音频循环播放, 可选值: 'all', 'one', 'none'
order'list'音频循环顺序, 可选值: 'list', 'random'
preload'auto'预加载,可选值: 'none', 'metadata', 'auto'
volume0.7默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效
audio-音频信息, 应该是一个对象或对象数组
audio.name-音频名称
audio.artist-音频艺术家
audio.url-音频链接
audio.cover-音频封面
audio.lrc-详情
audio.theme-切换到此音频时的主题色,比上面的 theme 优先级高
audio.type'auto'可选值: 'auto', 'hls', 'normal' 或其他自定义类型, 详情
customAudioType-自定义类型,详情
mutextrue互斥,阻止多个播放器同时播放,当前播放器播放时暂停其他播放器
lrcType0详情
listFoldedfalse列表默认折叠
listMaxHeight-列表最大高度
storageName'aplayer-setting'存储播放器设置的 localStorage key

多首音乐播放列表

上述入门js控制中只能设置一首歌曲,这里设置一首及以上:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const ap = new APlayer({
container: document.getElementById('player'),
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'
}
]
});

使用歌单播放列表

一首一首设置歌曲太麻烦?推荐使用歌单模式,ajax!json设置好了,直接用就完事了。

1
2
3
4
5
6
7
$.ajax({
// 你的歌单id
url: 'https://api.i-meto.com/meting/api?server=netease&type=playlist&id=29273806',
success: function (list) {
ap.list.add(list);
}
});

举例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var ap = new APlayer({
element: document.getElementById('aplayer'),
narrow: false,
fixed: true,
/*自动播放,默认值为false,true为开启自动播放*/
autoplay: false,
mutex: true,
lrcType: 3,
});
$.ajax({
// 你的歌单id
url: 'https://api.i-meto.com/meting/api?server=netease&type=playlist&id=29273806',
success: function (list) {
ap.list.add(list);
}
});

吸底/迷你模式

这个没准备写的,但是用的人多,也写进来,其实就是两个参数:

  • 吸底模式:fixed: true
  • 迷你模式:mini: true

CDN

本地引用太慢?官方提供了CDN

  • jsDelivr:https://www.jsdelivr.com/package/npm/aplayer
  • cdnjs:https://cdnjs.com/libraries/aplayer
  • unpkg:https://unpkg.com/aplayer/

后话

到此就结束了,适合新手学习,只要入门那里的代码落实到位了APlayer就能出来了,其他的就是样式问题了。