WordPress网站音乐播放器(非插件)

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

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

点赞
  1. jaocky说道:
    Google Chrome 86.0.4240.75 Windows 10

    请问有没有什么办法能默认隐藏歌词呢?
    底下几行小字看着很不舒服

    1. 云间屋说道:
      Safari Mac OS X 10.15.6

      哈哈哈我觉得这个也没啥,所以还没研究过怎么隐藏。

  2. jaocky说道:
    Firefox 82.0 Windows 10

    想要这个雪花飘落的效果。。。。。。

    1. 云间屋说道:
      Safari Mac OS X 10.15.6

      这个是主题自带的,可在主题里设置。

  3. TsriGero说道:
    Google Chrome 88.0.4324.104 Windows 10

    那个并没显示怎么办?

    1. 云间屋说道:
      Google Chrome 88.0.4324.96 Windows 10

      查看一下是不是主题地址没写对,歌单id等逐个排除,我刚测试是好着的。

发表评论

邮箱地址不会被公开。 必填项已用*标注

隐藏
换装