LRC 歌词文件方式嵌入

适用场景

LRC 文件方式是 APlayer 最推荐的歌词传递方式。适合：

• 歌词文件较多，需要独立管理
• 歌词内容较长，不想嵌在 JS 代码里
• 需要给多首歌曲分别配歌词
• 有现成的 .lrc 歌词文件库

三个参数配合

要启用 LRC 文件方式，需要同时设置：

代码示例

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    lrcType: 3,  // 启用文件方式
    audio: [{
        name: '歌曲名称',
        artist: '艺术家',
        url: 'audio.mp3',
        cover: 'cover.jpg',
        lrc: 'lyrics/song.lrc'  // LRC 文件地址
    }]
});

多歌曲各自配歌词

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    lrcType: 3,
    audio: [
        {
            name: '第一首',
            artist: '艺术家A',
            url: '1.mp3',
            cover: '1.jpg',
            lrc: 'lyrics/1.lrc'
        },
        {
            name: '第二首',
            artist: '艺术家B',
            url: '2.mp3',
            cover: '2.jpg',
            lrc: 'lyrics/2.lrc'
        },
        {
            name: '第三首',
            artist: '艺术家C',
            url: '3.mp3',
            cover: '3.jpg'
            // 没有 lrc 字段 = 这首歌不显示歌词
        }
    ]
});

每首歌可以有自己的 LRC 文件路径，没有配置 lrc 字段的歌曲不会显示歌词区域。

LRC 文件内容

一个标准的 .lrc 文件看起来是这样的：

[00:00.00]歌曲标题
[00:01.00]艺术家 - 歌曲名
[00:05.00]第一行歌词
[00:10.50]第二行歌词
[00:15.00]第三行歌词
[00:20.25]
[00:22.00]空行也是一行歌词（用于间奏）
[00:28.00]继续……

详见 歌词格式规范 了解 APlayer 支持的全部时间戳语法。

LRC 文件的 HTTP 头

LRC 文件通过 fetch 请求加载。为了确保浏览器能正确加载，需要保证：

1. CORS 配置正确：如果 LRC 文件和网页不在同一个域，需要服务端返回正确的 CORS 头
2. Content-Type：理想情况下返回 text/plain 或 application/lrc，但大多数情况下即使返回 application/octet-stream 也能正常工作
3. 没有访问控制：文件应该是公开可访问的 URL

常见问题排查

歌词不显示

排查步骤：

1. 检查 lrcType 是否设为 3
2. 检查 audio.lrc 路径是否正确（直接在浏览器地址栏打开看能不能访问）
3. 检查浏览器控制台有没有 CORS 错误
4. 检查 LRC 文件编码是否为 UTF-8（APlayer 对编码比较敏感）

歌词显示但不滚动

这种情况通常是歌词时间戳格式不对。检查 LRC 文件里的时间戳是不是 [mm:ss.xx] 这种格式。详见 歌词格式规范。