添加全站 APlayer 播放器

原创

惶心

发布于 2018-07-08 12:51:50

4.1K1

发布于 2018-07-08 12:51:50

文章被收录于专栏：惶心 - 技术博客

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

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

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

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 已经在博客可用：