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

这种方法很简单，只需加载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

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