给网站添加一个Aplayer音乐播放器。

vce1

1 年前

最近把主题更换成了argon，这是一个很棒的wordpress主题，样式很丰富，可自定义程度很高。

因为换了主题，一些之前主题所自带功能没有了，比如说为网站添加一个音乐播放列表，于是便搜寻了蛮久，发现了一个开源且轻巧好用的HTML5音乐播放器——APlayer。

基础组件

APlayer

GitHub

DIYgod/APlayer

轻巧且功能齐全的HTML5播放器。

Meting

GitHub

metowolf/Meting

由大佬提供的解析音乐api。

MetingJS

GitHub

metowolf/MetingJS

方便连接APlayer与Meting音乐api的组件。

在网站中插入示例：

在wordpress的argon主题后台中，仪表盘->Argon主题选项->页尾脚本，在里面填入以下代码

<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>
<meting-js
fixed="true"
server="netease"
type="playlist"
id="5225821464"
order="random"
preload="none">
</meting-js>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

<meting-js> 中参数可选：

参数项	参数值	说明	可选值
fixed	true	APlayer 开启吸底模式，即现在左下角这个样子。	false， true
server	netease	即播放源平台，这里我选择的是网易云音乐。	netease, tencent, kugou, xiami, baidu
type	playlist	音乐类型，这里我选择的是歌单。	song, playlist, album, search, artist
id	7923388379	id，由于我选择是歌单，这里便是歌单 id
order	random	循环模式，这里选择的是随机循环	‘list’, ‘random’
preload	none	预加载，我选择的是不预加载	‘none’, ‘metadata’, ‘auto’
autoplay	true	自动播放模式	false， true

如果一切顺利，刷新主页就会出现一个轻巧的音乐播放器了。

基础组件

APlayer

Meting

MetingJS

在网站中插入示例：

参考