APlayer HTML5 音乐播放器完整文档站
关于本站：第三方整理的中文文档站，非官方页面；内容来自公开资料整理，功能与界面以官方最新版为准。
产品档案速览
| 项目 | 说明 |
|---|---|
| 全名 | APlayer |
| 定位 | HTML5 网页音乐播放器 |
| 作者 | DIYgod |
| 开源许可 | MIT |
| npm 包名 | aplayer |
| 当前版本 | 1.10.1 |
| 运行环境 | 现代浏览器（Chrome / Firefox / Safari / Edge） |
| 核心依赖 | 无（原生 HTML5 Audio API） |
| 扩展依赖 | hls.js（HLS 流媒体）、color-thief.js（封面自适应主题色） |
本站内容导览
本站按 APlayer 的功能模块组织内容，建议按以下路径逐步了解：
- 播放器核心概念：播放器总览 介绍 APlayer 是什么、核心能力边界；正常模式、吸底模式、迷你模式 分别讲解三种显示形态的适用场景与配置参数。
- 嵌入与集成：CDN 快速嵌入 是最快上手方式；npm 安装与导入 适合前端工程化项目；MetingJS 接入音乐平台 让你直接接入网易云、QQ 音乐等国内主流平台；博客框架插件 覆盖 Typecho、Hexo、WordPress、Z-BlogPHP 等主流博客程序；Vue 和 React 组件 提供组件化集成方案。
- 歌词同步：LRC 文件方式、JS 字符串方式、HTML 内嵌方式 覆盖三种歌词传递途径；歌词格式规范 详细列出支持的时间戳语法。
- 主题与样式：主题色设置 讲全局主题；封面自适应主题色 实现按专辑封面自动调色；单曲目独立主题色 让每首歌有自己的配色；播放列表样式控制 管列表的折叠与高度。
- API 与事件：播放控制 API 讲 play/pause/seek；列表管理 API 讲增删切换；歌词显示 API、主题色 API 覆盖 UI 控制；音频事件 和 播放器事件 列出全部事件绑定。
- 流媒体与扩展：HLS 流媒体支持 需要 hls.js 前置；自定义音频类型 让你接入任意格式；通知系统 讲 notice 接口。
- 实用技巧：多播放器互斥、自动播放策略、音量持久化、销毁与重建 覆盖常见开发场景。
- 排错指南：移动端自动播放失败、音频跨域问题、歌词不滚动、吸底与迷你模式冲突、HLS 不支持。
谁在用 APlayer
APlayer 是国内最流行的前端音乐播放器之一，被以下站点选用：
- bilibili —— 国内知名视频弹幕网站
- 黑客派 —— 程序员和设计师社区
- 浙江大学 CC98 论坛 —— 浙江大学校园论坛
- 站长之家 —— 中文站点服务平台
- 歌词千寻 —— LRC 歌词网站
技术亮点
- 零依赖核心：不加载任何第三方库即可运行，CSS + JS 合计仅几十 KB
- 原生 HTML5 Audio API：无 Flash、无 VLC 插件，纯 Web 技术
- 三种显示形态：正常 / 吸底 / 迷你，适应不同页面布局
- LRC 实时滚动歌词：行级高亮同步，支持多行时间戳
- 播放列表管理：增删切换、循环模式、播放顺序全部可编程控制
- 主题色系统：全局 + 单曲目双层级，可按封面自动取色
- HLS 流媒体：配合 hls.js 支持 m3u8 直播流
- MIT 开源：完全免费，可商用可魔改