天天彩票官网:为WordPress添加音乐播放器(纯代码实现)

2018年11月13日23:44:38 30 1,914 °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
微信公众号
分享技术,乐享生活:Jack Cui公众号每周五推送“程序员欢乐送”系列资讯类文章,欢迎您的关注!
Jack Cui
ai

发表评论

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

目前评论:30   其中:访客  16   博主  14

    • avatar 阿桂 来自天朝的朋友 QQ浏览器  Android 7.1.1 1713-A01 Build/NMF26X 河南省郑州市 联通 2

      不懂技术,网站想改都废事,技术大神厉害

        • avatar Jack Cui Admin 来自天朝的朋友 谷歌浏览器  Android 8.0.0 MIX 2 Build/OPR1.170623.027 辽宁省沈阳市 联通

          @阿桂 感谢支持,那可以买插件用用,也可以。

        • avatar 勃兰登堡协奏曲 来自天朝的朋友 谷歌浏览器  SM-G9600 Build/R16NW 华中农业大学学生宿舍 12栋(博园2栋) 1

          你好,我写了个wordpress 网易音乐插件,也许你可以试一下。https://github.com/Jianghaowen/wordpress-netease-cloud-music-website-player-plugin

            • avatar Jack Cui Admin 来自天朝的朋友 谷歌浏览器 Windows 10 辽宁省沈阳市 联通

              @勃兰登堡协奏曲 不错哦,你这个是点击music icon之后加载js和css吧?

                • avatar 勃兰登堡协奏曲 来自天朝的朋友 谷歌浏览器 Windows 10 华中农业大学学生宿舍 12栋(博园2栋) 1

                  @Jack Cui 不是的,整个是挂载在wp-footer钩子下面的,网页加载好,播放器就在的,只是用css display:none;隐藏掉了,点击icon后display:block;显现出来。

                • avatar Jack Cui Admin 来自天朝的朋友 谷歌浏览器 Windows 7 辽宁省沈阳市 东北大学三舍南(研究生)

                  @勃兰登堡协奏曲 嗯嗯,看代码了。打算实现一个点击按钮加载的,要不然挺影响网站响应速度的。

                • avatar AnselJoker 来自天朝的朋友 谷歌浏览器 Windows 10 山东省济南市 电信 1

                  在线音乐的歌单在哪可以找到?????? :grin: :grin: :grin: :grin: :grin:

                    • avatar Jack Cui Admin 来自天朝的朋友 谷歌浏览器 Windows 7 辽宁省沈阳市 东北大学三舍南(研究生)

                      @AnselJoker 歌单?我自己收藏的啊。

                        • avatar AnselJoker 来自天朝的朋友 谷歌浏览器 Windows 10 山东省济南市 电信 1

                          @Jack Cui MKOnlineMusicPlayer的歌单是从哪儿获取的你研究过没?

                            • avatar Jack Cui Admin 来自天朝的朋友 谷歌浏览器 Windows 7 辽宁省沈阳市 东北大学三舍南(研究生)

                              @AnselJoker 排行榜还是什么啊?排行榜都是api接口,自己源码。

                        • avatar Duskry 来自天朝的朋友 火狐浏览器 Windows 10 湖南省邵阳市 联通 1

                          这个MKOnlineMusicPlayer 你是直接整个上传到哪个路径的,wordpress的后端在哪接上,小白有点不懂,望解惑! :roll:

                            • avatar Jack Cui Admin 来自天朝的朋友 谷歌浏览器  Android 8.0.0 MIX 2 Build/OPR1.170623.027 辽宁省沈阳市 联通GSM/WCDMA/LTE共用出口

                              @Duskry 直接放到网站根目录即可。

                                • avatar Duskry 来自天朝的朋友 火狐浏览器 Windows 10 湖南省邵阳市 联通 1

                                  @Jack Cui 已解决!

                              • avatar Jone 来自天朝的朋友 谷歌浏览器 Windows 10 河南省开封市 河南大学 1

                                你好,我按照你的方法做了,但是刷新页面后,没有出现播放器,不知道怎么回事

                                  • avatar Jack Cui Admin 来自天朝的朋友 谷歌浏览器 Windows 10 黑龙江省哈尔滨市 联通

                                    @Jone 清理下缓存呢?

                                    • avatar Jone 来自天朝的朋友 谷歌浏览器 Windows 10 河南省开封市 河南大学 1

                                      @Jone 没作用,路径是以footer这个文件为基准吧?我的css,js均放在assets下面,assets与footer位于同级目录下

                                        • avatar Jack Cui Admin 来自天朝的朋友 谷歌浏览器 Windows 10 黑龙江省哈尔滨市 联通

                                          @Jone 那就是路径的问题,你得保证路径对,能找到文件。F12审查元素看下什么错误就知道了。

                                            • avatar Jone 来自天朝的朋友 谷歌浏览器 Windows 10 河南省开封市 河南大学 1

                                              @Jack Cui Failed to load resource: the server responded with a status of 404 (Not Found),博主,这是什么情况?

                                                • avatar Jack Cui Admin 来自天朝的朋友 谷歌浏览器 Windows 10 黑龙江省哈尔滨市 联通

                                                  @Jone 路径不对,找到文件,你改下吧。

                                          • avatar gock 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省常州市 电信 1

                                            怎么自动播放???

                                              • avatar Jack Cui Admin 来自天朝的朋友 Safari浏览器 Mac OS X 10_14_3 北京市 百度网讯科技联通节点

                                                @gock 现在已经无法自动播放了吧,浏览器不允许,这个是没办法的。之前可以通过参数设置让其自动播放。

                                                  • avatar gock 来自天朝的朋友 QQ浏览器  PRO 6 Build/NMF26O 江苏省常州市 电信 1

                                                    @Jack Cui 怎么设置参数呢?小白一个不懂。还望大神举个例子

                                                      • avatar Jack Cui Admin 来自天朝的朋友 Safari浏览器 Mac OS X 10_14_3 北京市 百度网讯科技联通节点

                                                        @gock 你看手册啊,有说明auto=True之类的。你现在设置也没用,以后浏览器都不让自动播放了,就是你设置了也没用。

                                                          • avatar Gock 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省常州市 电信 1

                                                            @Jack Cui 就是看了说明设置没有自动播放才问你的

                                                    • avatar 循梦渡 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省盐城市 移动 0

                                                      文件放的路径对了,然而还是没有显示播放器窗口啊

                                                        • avatar Jack Cui Admin 来自天朝的朋友 Safari浏览器 Mac OS X 10_14_3 北京市 百度网讯科技联通节点

                                                          @循梦渡 需要清理浏览器缓存

                                                        • avatar 萝莉璃 来自天朝的朋友 谷歌浏览器 Windows 10 广东省阳江市 电信 1

                                                          怎么默认不显示歌词呢

                                                            • avatar Jack Cui Admin 来自天朝的朋友 谷歌浏览器 Mac OS X 10_14_3 北京市 百度网讯科技联通节点

                                                              @萝莉璃 默认是显示的吧?最好不要显示,显示有的时候有bug。

                                                                • avatar 萝莉璃 来自天朝的朋友 谷歌浏览器 Windows 10 广东省阳江市江城区 电信 1

                                                                  @Jack Cui 我想知道怎么设置才能默认不显示呢 现在是默认显示= =

                                                                    • avatar Jack Cui Admin 来自天朝的朋友 谷歌浏览器 Mac OS X 10_14_3 北京市 百度网讯科技联通节点

                                                                      @萝莉璃 = =默认显示我也不会,我当时改来着,没改出来。