WordPress添加音乐播放器(纯代码实现)

小柒博客 WordPress美化11211.7K4字数 1290阅读4分18秒阅读模式

一、前言

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

二、效果图

WordPress添加音乐播放器(纯代码实现)-图片1

三、安装

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文件(下载地址

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

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

<link rel="stylesheet" href="wp-content/themes/construction-
base/css/APlayer.min.css"><script src="wp-content/themes/construction-base/js/APlayer.min.js">
</script>
<div class="aplayer"
data-id="969649908"
data-fixed="true" data-
server="netease"
data-volume="0.8"
data-type="playlist">
</div>
<script src="wp-content/themes/construction-base/js/Meting.min.js">
</script>

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

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

WordPress添加音乐播放器(纯代码实现)-图片2

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

PS:歌单更新歌曲实时更新。

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如本文“对您有用”,欢迎随意打赏,谢谢!

继续阅读
Wechat
微信扫一扫,加我!
weinxin
微信公众号
微信扫一扫,关注我!
weinxin
小柒博客
  • 本文由 小柒博客 发表于 2019年5月9日16:14:47
  • 声明:本站所有文章,如无特殊说明或标注,本站文章均为原创。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。转载请务必保留本文链接:https://www.yangxingzhen.com/1914.html
评论  11  访客  11
    • 故兮
      故兮 0

      博主是怎么解决切换页面 Aplayer 中断的问题呢??

      • L.M
        L.M 1

        一开始加载太慢了欸。。

          • 小柒博客
            小柒博客

            @ L.M 第一次加载时间是这样的,正常的,后面有缓存就快了

              • L.M
                L.M 1

                @ 小柒博客 好的,感谢

            • 小佑
              小佑 1

              按照教程做了 但是主页啥也没有..

                • 小柒博客
                  小柒博客

                  @ 小佑 你的什么主题

                    • 小佑
                      小佑 1

                      @ 小柒博客 用的是Memory

                        • 小柒博客
                          小柒博客

                          @ 小佑 我用的知更鸟,其他主题自测哦

                            • 小佑
                              小佑 1

                              @ 小柒博客 好吧,谢谢 ~

                              • 小柒博客
                                小柒博客

                                @ 小佑 这个有插件的,也很方便

                        • 运维老司机
                          运维老司机 6

                          亲测,写的不错,感谢博主 :razz:

                        匿名

                        发表评论

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

                        取消

                        拖动滑块以完成验证