给博客加个音乐播放器，我绕了一圈才选对它
| 项目 | 内容 |
|---|---|
| 软件 | APlayer |
| 版本 | 2.0.9.0 |
| 平台 | Android APK |
| 体积 | 7.47M |
| 分类 | 系统工具 |
| 开发商 | rRemix |
| 包名 | remix.myplayer |
| 官网 | APlayer 官网 |
| 下载一 | APlayer 下载，APlayer 下载 |
| 下载二 | APlayer 下载，APlayer 下载 |
| 文档 | APlayer 文档 |
| 介绍 | 个人博客想放几首背景音乐试了好几种方案，从网易云挂件到 HTML5 audio 原生标签，最后落在了 APlayer 这个小巧的开源组件上。 |
APlayer 是什么
先交代一下这个东西。APlayer 是一个开源的网页音乐播放器组件——你给它一个 HTML 容器、一串音频地址，它就能渲染出一个带封面、歌词、播放列表的完整播放器界面。最早是给网页加背景音乐用的，后来发展成了一个小而全的播放器家族，配合 MetingJS 这种配套库，能直接拉网易云、QQ 音乐的歌单，不用自己写后端接口。
那个被广告耽误的下午
上周六我在咖啡馆改自己的博客模板，改到一半觉得页面太空，想在侧边栏加个音乐模块——不是自动播放的那种（太烦人），就是放个播放器卡片，访客想听就点一下。
一开始想偷懒，直接嵌网易云的官方挂件。打开网易云后台生成代码，贴到模板里，刷新页面——好家伙，一个大大的推广横幅，还带个"下载客户端"的按钮。这哪是我的博客，这是网易云的广告位。
换 QQ 音乐的试试，情况差不多。第三方播放器插件也找了几个，要么体积大得离谱，要么界面老得像十年前的网吧弹窗。
我掏出手机在推特上搜了一圈，有人提了一句 APlayer，说"比大多数播放器都轻，而且能接 MetingJS 拉国内平台的歌"。我去搜了一下作者仓库，Star 数快两万了，说明不是个玩具项目。
从一首 HTML 标签到一行配置
我先试了最朴素的用法——给它一个 HTML 容器，然后在脚本里 new 一个 APlayer 实例，传进去一首歌的地址。代码大概长这样：
<div id="aplayer"></div>
<script>
const ap = new APlayer({
container: document.getElementById('aplayer'),
audio: [{
name: '晴天',
artist: '周杰伦',
url: '1.mp3',
cover: '1.jpg'
}]
});
</script>刷新页面，播放器出来了。封面、进度条、播放列表一切正常。我有点惊喜——就这么点代码，界面比那些动辄几百 KB 的插件还清爽。
但光播本地文件不够用。博客访客来自全国各地，谁知道他们想听什么。这时候就该 MetingJS 上场了——它是 APlayer 的配套库，能调用公开的 Meting API 去拉网易云、QQ 音乐、酷狗这些平台的音频地址、歌词和封面。
接入方式简单到离谱。在 CDN 引入 MetingJS 之后，直接写一个 <meting-js> 标签就行了：
<meting-js
server="netease"
type="playlist"
id="60198">
</meting-js>server 指定平台，type 指定拉歌单还是专辑还是单曲，id 就是网易云里那串数字 ID。我把自己网易云收藏夹的歌单 ID 填进去，刷新页面——十几首歌瞬间出现在播放列表里，每首都有封面和歌词。
切歌的时候发现了一个彩蛋
用了两天之后我注意到一个细节：每切一首歌，播放器的主题色会跟着封面图变。周杰伦的歌是暖黄色，陈绮贞的歌变成了清新的草绿，换一首金属封面的歌就切成了冷灰蓝。
一开始以为是 APlayer 内置的效果，翻了文档才知道——这是配合 color-thief.js 库实现的。color-thief 能从一张图片里提取主色调，切歌时 APlayer 调用它拿到当前封面的颜色，然后把自己的主题色平滑过渡过去。
接入也不难。在 APlayer 之后引入 color-thief，然后写一个函数：下载封面图 → 提取主色 → 调 ap.theme() 设置主题。最后监听 APlayer 的 listswitch 事件，每次切歌时重新跑一遍。
我试着把这个功能关掉了——手动指定了一个固定主题色。对比了一下，还是自动提取好看。固定颜色显得死板，封面色自动跟随时播放器和歌曲本身产生了某种"化学反应"，听音乐的感觉都轻盈了一点。
歌词不滚动的那个小坑
有天我改完模板刷新页面，发现歌词区域只有文字但不跟着滚动——播放到哪一行它都停在第一行。
翻了排错指南，排查清单里给了几个高概率原因。我先检查了 lrcType 参数——这是个顶层参数，放错位置就会静默失效。我在自己的代码里搜了一下，果然把 lrcType 塞进了 audio 对象内部，而不是 new APlayer 的 options 里。移到顶层之后歌词开始滚动了。
文档里还列了 LRC 时间戳格式的问题——APlayer 只认 [分:秒.毫秒] 这种格式，不接受 [分:秒:毫秒]。好在 MetingJS 返回的 LRC 格式是对的，我自己不用操心这个。但如果是手动写 LRC 文件的话，这点得注意。
事后复盘
绕了一圈才选定 APlayer，回头看其实没那么复杂。总结一下几个判断点：
第一，别偷懒用大厂的官方挂件。它们的核心目的是导流和推广，给用户的播放器只是顺便的事。自己的博客、自己的页面，播放器的界面和行为必须自己能说了算。
第二，组件要小而全。APlayer 的核心 JS 压缩后不到 30KB，加上 MetingJS 也才 50KB 出头。对比那些动辄几百 KB 的重型播放器，它加载几乎是瞬时的。功能上虽然不像商业播放器那样有一堆特效，但核心的播放、列表、歌词、主题色都齐了。
第三，接入成本低到可以忽略。一个 <div> 加几行初始化代码就能跑，想用 MetingJS 更简单，一个自闭合标签完事。就算之后想换别的播放器，迁移成本也几乎为零——所有音频数据都在自己手里，不是锁死在某个平台的私有格式里。
写博客本来就是一件很个人的事，加个播放器这种小功能，本来没想写这么多。但 APlayer 确实让我体验到了开源组件最舒服的那种感觉：够轻、够透明、够自由，不绑你、不逼你、不推广告。就挺好。
本文为个人基于网络公开资料整理编写，非官方内容，仅供学习交流参考；软件版权归原作者所有，请支持正版；使用过程中遇到问题请查阅官方渠道，本文不承担任何责任。
