让 Ghost 吃上 APlayer

之前围绕着 DIYgod 做的 HTML5 音乐播放器 APlayer 做了不少东西,然而因为种种原因并没有给自己的博客挂上。

Wordpress 有 Hermit-X,Typecho 有 APlayer-Typecho, 然而 Ghost 什么也没有,主要是官方一直没给出插件开发的文档。

于是我花了一点时间,开发了一个云解析的播放器「插件」,主要原理是由 JS 解析短标签的数据,从 API 请求歌曲信息,再在用户端进行生成播放器。目前已经发布在 https://github.com/metowolf/MetingJS

理论上这个方式可以在任何网站上使用,并且允许用户自定义自己的 API.

期间遇到了不少问题,诸如样式炸裂、跨域、异步请求等等,不过都解决了。

下面记录一下简化后的步骤:

引入依赖

首先进入后台,进入 Code Injection 菜单,在 Blog Header 加入代码

<style>
    li {margin: 0em 0;}
    button {min-height: 0px;}
    .aplayer {margin: 0 0 1.75em 0 !important;}
</style>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>

*其中 css 部分是为了修复主题和播放器不兼容的部分

然后在 Blog Footer 中添加

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script>

至此,播放器已经引入成功了

使用

在文章中想要的位置添加如下的代码即可

<div class="aplayer" data-id="60198" data-server="netease" data-type="playlist" data-mode="random"></div>

其中的参数如下,加粗表示必须

  • data-id: 歌曲/专辑/歌单 ID
  • data-server: 音乐平台,支持如下参数
    • netease
    • tencent
    • xiami
    • kugou
    • baidu
  • data-type: 请求类型,支持如下参数
    • song (单曲)
    • album (专辑)
    • playlist (歌单)
    • search (搜索)
  • data-order: 播放模式
    • random (随机)
    • list* (列表)
  • data-autoplay: 自动播放
    • false*
    • true

更多参数详见 https://github.com/metowolf/MetingJS#option

更新日志

  • 1.1.0 支持 APlayer 1.7.x
  • 1.0.1 兼容普通模式下的 APlayer
  • 1.0.0 框架重写,更名 MetingJS

演示

<div class="aplayer" 
    data-id="933900516" 
    data-server="netease" 
    data-type="playlist" 
    data-order="random">
</div>
<div class="aplayer"
    data-name="rainymood"
    data-artist="rainymood"
    data-url="https://rainymood.com/audio1110/0.m4a"
    data-cover="https://rainymood.com/i/badge.jpg">
</div>
项目作者说明
MetingJS METO a beautiful HTML5 music player (with Meting API)
APlayer DIYgod a beautiful HTML5 music player
Meting METO a powerful music API framework

本文采用 CC BY-NC-SA 3.0 Unported 协议进行许可
本文链接:https://i-meto.com/ghost-aplayer/