网站美化:为WordPress添加音乐播放器(纯代码实现)

2018年11月13日23:44:38 86 7,813 °C
摘要

为WordPress网站添加一个音乐播放器,网上大部分的教程都是使用各种插件,有的插件还需要花钱买授权,用着不爽。本文用纯代码为网站添加音乐播放器,安全可靠,可以任意修改。

网站美化:为WordPress添加音乐播放器(纯代码实现)

一、前言

为WordPress网站添加一个音乐播放器,网上大部分的教程都是使用各种插件,有的插件还需要花钱买授权,用着不爽。本文用纯代码为网站添加音乐播放器,安全可靠,可以任意修改。

二、效果

实现效果先睹为快:

网站美化:为WordPress添加音乐播放器(纯代码实现)

三、部署

1、Aplayer

其实很简单,Github有很多大神开源了相关的内容。用着最舒服的,当属Aplayer了,可以去官网体验一下:

https://aplayer.js.org/

文档手册也很翔实:

https://github.com/MoePlayer/APlayer

方法很简单,加载Aplayer的js和css,在想要展先的位置调用即可。Aplayer支持很多模式,上图展示的效果为吸底模式,就是在网页的页面最左下角展示。本文以吸底模式为例进行说明,如果想采用其它模式,可以根据文档手册修改代码。

2、Meting

如果只使用Aplayer,那么需要指定音乐的图片地址,mp4地址,歌词等,用着不是很方便,这时就可以使用Meting作为辅助:

https://github.com/metowolf/MetingJS

Meting为Aplayer提供了网易云音乐的API接口,只要获得网易云音乐歌单的ID,就可以自动加载歌单里所有的歌曲,直接调用,方便很多,当然除了网易云音乐的API,还有其他的接口。

3、开工

如果上述这些说了都不懂,没关系,跟着接下来的步骤走即可。

首先下载为各位打包好的js和css文件(密码:7izw)

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

在主题的footer.php中添加如下代码:

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

但是这个播放器的歌单是我指定的歌单,如果想用自己的网易云音乐歌单,可以修改data-id的值,这个值的获取方法也很简单:

网站美化:为WordPress添加音乐播放器(纯代码实现)

打开网页版的网易云音乐,地址栏的id参数就是对应的data-id值,自己创建一个歌单,想放什么音乐就放什么音乐。

4、其他

值得注意的是,歌单只有在第二天才会更新,也就是如果向网站的歌单中添加了一个新的音乐,不会立刻在网站中展示,等到第二天才会更新,这是解析服务器设置的规则。

四、总结

  • 更多参数说明和个性化的设置,可以查看相应的项目手册;
  • 如果不想使用Meting,想调用自己的解析接口也可以,在网站部署个音乐解析接口即可,这种接口直接百度即可,有很多源码;
  • 播放器会随着页面的刷新而重新加载刷新,如果想页面刷新但播放器不跟着刷新,继续播放音乐,需要配置全站pjax。
weinxin
微信公众号
分享技术,乐享生活:微信公众号搜索「JackCui-AI」关注一个在互联网摸爬滚打的潜行者。
Jack Cui

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:86   其中:访客  51   博主  35

    • avatar neash 来自天朝的朋友 谷歌浏览器 Windows 10 浙江省杭州市 移动 0

      有点小疑惑,这个和使用网易云提供的外链生成器之间有啥差别吗。
      目前网易云外链生成器已经不支持歌单生成了,版权原因。
      使用这个手段生成歌单仍然有效吗

      • avatar datealive 来自天朝的朋友 谷歌浏览器 Windows 10 广东省汕头市 电信 0

        大大,请问如果我要把模式改成其他模式,应该要修改哪里的代码?

        • avatar Smurfs 来自天朝的朋友 谷歌浏览器 Windows 10 中国 移动 0

          请问怎么配置全站pjax?有详细一点的教程吗?嘻嘻小白一枚,学习一波!

            • avatar Jack Cui Admin 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 中国电信北京研究院

              @Smurfs 全站pjax的教程我也没有。看看其他教程吧。

            • avatar A dust 来自天朝的朋友 谷歌浏览器 Windows 10 山西省长治市 联通 0

              您好,我按照您的步骤还是没设置成功,请指教,非常感谢!