最近想给网站弄一个音乐播放器,但又不想使用插件,毕竟插件用的多不好,所以就在网上找了些非插件的方法。逐个测试之后都不太理想,最终找到下边这个方法,总算解决了问题。
这种方法很简单,只需加载js和css,在需要展示的位置调用即可。个人觉得比有的插件方便好用。
1、首先下载打包好的js和css文件。
2、在本地解压后,会看到三个文件APlayer.min.css、APlayer.min.js、Meting.min.js,将两个js文件放到主题的js文件夹中,将css文件放到主题的css文件夹中。
3、在后台主题编辑器中找到footer.php,并添加如下代码。
1 | <link rel="stylesheet" href="path-to/css/APlayer.min.css"> |
4、将代码中的path-to改为你的WordPress主题的根目录。保存好后,刷新网页就可以看到播放器了。
上述代码中的data-id的值,是自己网易云歌单的id值。以网易云为例,登陆网易云网页版选择要添加的歌单,浏览器地址框中显示的id值就是data-id的值。
另外当天给歌单新增的音乐,不会立马展示在播放器中,会在第二天更新,这是解析服务器设置的规则。但经测试,发现网易云新增的音乐是实时更新的。
播放器会随着页面的刷新而重新加载刷新,如果想页面刷新但播放器不跟着刷新,继续播放音乐,需要配置全站pjax。