近想给网站弄一个音乐播放器,但又不想使用插件,毕竟插件用的多不好,所以就在网上找了些非插件的方法。逐个测试之后都不太理想,最终找到下边这个方法,总算解决了问题。

这种方法很简单,只需加载js和css,在需要展示的位置调用即可。个人觉得比有的插件方便好用。

1、首先下载打包好的js和css文件,提取密码:7izw

下载链接:点击下载压缩包

2、在本地解压后,会看到三个文件APlayer.min.css、APlayer.min.js、Meting.min.js,将两个js文件放到主题的js文件夹中,将css文件放到主题的css文件夹中。

3、在后台主题编辑器中找到footer.php,并添加如下代码。

<link rel="stylesheet" href="path-to/css/APlayer.min.css">
<script src="path-to/js/APlayer.min.js"></script>
<div class="aplayer"
    data-id="2507749822"
    data-fixed="true"
    data-server="netease"
    data-volume="0.4"
    data-type="playlist">
</div>
<script src="path-to/js/Meting.min.js"></script>

4、将代码中的path-to改为你的WordPress主题的根目录。保存好后,刷新网页就可以看到播放器了。

上述代码中的data-id的值,是自己网易云歌单的id值。以网易云为例,登陆网易云网页版选择要添加的歌单,浏览器地址框中显示的id值就是data-id的值。

另外当天给歌单新增的音乐,不会立马展示在播放器中,会在第二天更新,这是解析服务器设置的规则。但经测试,发现网易云新增的音乐是实时更新的。

播放器会随着页面的刷新而重新加载刷新,如果想页面刷新但播放器不跟着刷新,继续播放音乐,需要配置全站pjax。

原文出处:网站美化:为WordPress添加音乐播放器(纯代码实现) | Jack Cui


长风破浪会有时,直挂云帆济沧海。