CDN 方式最快嵌入 APlayer

适用场景

CDN 方式是最快的上手路径。适合：

• 纯静态 HTML 页面
• 没有构建工具的老式网站
• 个人博客的单个页面
• 快速原型验证

整个过程只需要三行代码：引入 CSS、放置容器、引入 JS 并初始化。

三大 CDN 对比

APlayer 同时发布在 jsDelivr、cdnjs 和 unpkg 三个 CDN 上，任选其一：

标准引入模板

以下是完整的 CDN 引入代码，可直接复制：

<!-- 1. 引入 CSS -->
<link rel="stylesheet" href="APlayer.min.css">

<!-- 2. 放置播放器容器（位置随意，宽高由内容撑开） -->
<div id="aplayer"></div>

<!-- 3. 引入 JS（放在 </body> 之前） -->
<script src="APlayer.min.js"></script>

<!-- 4. 初始化播放器 -->
<script>
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    audio: [{
        name: '歌曲名称',
        artist: '艺术家',
        url: 'your-audio.mp3',
        cover: 'your-cover.jpg'
    }]
});
</script>

版本号选择

CDN URL 中的版本号有三种写法：

aplayer@1.10.1/    // 固定到某个具体版本，推荐生产环境使用
aplayer@1.10/      // 锁定大版本的最新小版本（1.10.x），会随补丁更新自动升级
aplayer@latest/    // 永远指向最新版，不推荐生产环境使用

全局 APlayer 变量

通过 CDN 引入后，APlayer 类会挂载到全局作用域（window.APlayer）。这意味着你可以直接在任何 script 标签里使用 new APlayer(...)，不需要 import。

CDN 引入 + HLS 支持

如果需要播放 m3u8 格式的流媒体，需要先引入 hls.js：

<script src="hls.min.js"></script>
<script src="APlayer.min.js"></script>

顺序很重要：hls.js 必须在 APlayer 之前加载，否则 APlayer 无法识别 hls 类型的音频。

CDN 的优缺点

优点

• 零配置、零构建，三行代码就能跑
• 利用 CDN 缓存，访问过的用户二次加载速度快
• 不占用服务器带宽

缺点

• 依赖第三方 CDN 可用性
• 加载的是完整 min.js，不能按需裁剪
• 国内访问 jsDelivr 偶尔较慢（可换 cdnjs 或自建）

自托管

如果不想依赖外部 CDN，可以把两个文件下载到自己服务器：

# 下载 APlayer
# 从 jsDelivr 拉取或 npm install 后复制 dist/ 目录

下载后放到你自己的静态资源服务器上，修改 link 和 script 的 src 指向本地路径即可。