添加全站 APlayer 播放器

之前 @狗子 在群里秀他的 Aplayer,还 post 了博文。然后我一看,哇!这就是我想要的!

他所展示的,是一个固定在网页左下角的 APlayer 播放器,并且配上了自己写的 API 进行歌曲解析,可以说是非常厉害了。

萌新瑟瑟发抖.jpg

之前一度以为固定在左下角的样式是他自己写的(顿时觉得大佬就是很厉害),然后就要求了几次他开发个插件而不是单单集成在他的主题里面,后来他喊我去读 APlayer 的文档,才发现 Aplayer 自带 fixed mode,也就是我刚刚说的固定左下角的样式(吸底模式)。

Aplayer Fixed Mode 效果

APlayer 的官方文档是这么写的

Aplayer 的官方文档关于吸底模式的描述

然而我 看!不!懂!啊!

折腾了好久都不知道怎么弄啊!

调用都不成功啊!

然后我在 GitHub 找了个 APlayer Demo,确实是成功了。但是我想要实现的是:自动抓取我的网易云 “我喜欢的音乐” 列表,并且播放第一首歌(最新一首我喜欢的歌)。但是 Meting API 又不是太清楚怎么调用……

后来想起来,博客在使用 Memory 主题的时候,曾经在侧边栏放过基于 MetingJS 的 APlayer 播放器,四行代码即可调用:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.css">
<div class="aplayer" data-id="534542404" data-server="netease" data-type="song"></div>
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.1.0/dist/Meting.min.js"></script>

后来发现,MetingJS 已经支持 Aplayer 1.10.x,已经支持吸底模式了!

所以,稍微改动下代码,就成功了!

这里的外部调用链接没有包含版本号,默认加载最新 release 版本;正常来说不会出什么问题,但是如果需要 100% 稳定运行,建议自行加上版本号。

    <!-- MetingJS start -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
    <div class="aplayer" data-id="2305794885" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true"
        data-volume="1.0"></div>
    <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/meting/dist/Meting.min.js"></script>
    <!-- MetingJS end -->

因为这是纯 HTML 代码,所以可以在任何网站程序(甚至单页 HTML)里面使用。Wordpress 在 footer.php 加入以上代码即可。

提供两个 Demo 以供参考,同时包含了感谢信息:

https://hx.getrbq.com/aplayer.html (GitHub Pages)

https://hx.js.org/statics/aplayer.html (Cloudflare CDN)

目前,全站 APlayer 已经在博客可用:

全站 APlayer 已经在博客可用

2018.07.13 更新:由于可能会带来不好的体验,全站 APlayer 已被禁用。

点赞
  1. 蝉時雨说道:

    Material Design 风格主题还行o(* ̄▽ ̄*)ブ
    我之前也弄过这个风格~

  2. 保罗说道:

    它的生态维护的情况比较糟糕,那些插件也有很久没更新了... 主程序则是看着越来越繁杂了(也可以说是越来越强大吧)其中不理解的是为何循环和随机按钮拆分出来了...

    1. Huangxin说道:

      插件可能不是维护的主要部分吧... APlayer 本身还是在维护的,可以去看看 commit 和 release

发表评论

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