为你的网站添加音乐播放器

前言

通过纯代码为Wordprss添加音乐播放器,预览在本站左下脚

开始

介绍

使用了Aplayer和Meting

代码

这个的效果为博客左下角播放器

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/laoxong/lxongOther@67103a9/css/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/gh/laoxong/lxongOther@67103a9/js/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/laoxong/lxongOther@67103a9/js/Meting.min.js"></script>
<div class="aplayer"
data-id="歌单ID"
data-fixed="true"
data-server="netease"
data-volume="0.4"
data-type="playlist">
</div>

如果是Wordprss添加至主题的footer.php里面

参数

可以使用data-autoplay="true"进行自动播放（不建议这样做）

data-id为播放歌单ID
data-fixed 为吸底模式
lrc-type 设置为1即可开启歌词显示

data-volume为默认播放音量

order为播放顺序 list(列表)random(随机)

下面是在当前页面生成一个播放器

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/laoxong/lxongOther@67103a9/css/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/gh/laoxong/lxongOther@67103a9/js/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/laoxong/lxongOther@67103a9/js/Meting.min.js"></script>
<div class="aplayer"
data-id="613730894"
data-server="netease"
data-volume="0.4"
data-type="playlist">
</div>

注意

歌单更新并不是实时的
更多信息查看官方文档:https://aplayer.js.org/#/zh-Hans/