老兄de博客
老兄de博客

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

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

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

前言

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

开始

介绍

使用了AplayerMeting

代码

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/laoxong/[email protected]/css/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/gh/laoxong/[email protected]/js/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/laoxong/[email protected]/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/[email protected]/css/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/gh/laoxong/[email protected]/js/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/laoxong/[email protected]/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/

发表回复

textsms
account_circle
email

老兄de博客

为你的网站添加音乐播放器
为你的网站添加音乐播放器 前言 通过纯代码为Wordprss添加音乐播放器,预览在本站左下脚 开始 介绍 使用了Aplayer和Meting 代码 这个的效果为博客左下角播放器 &l…
扫描二维码继续阅读
2020-03-10