歌词显示但不滚动的排查清单

现象

播放器加载成功，歌词区域有文字，但播放时歌词不滚动、不高亮、停在第一行。

排查清单（按概率从高到低）

1. lrcType 参数是不是正确设置了

三种歌词方式对应三个值：

lrcType 是顶层参数，放在 new APlayer 的 options 里，不是在 audio 对象内部。

// ✅ 正确：lrcType 是顶层参数
const ap = new APlayer({
    lrcType: 3,           // ← 这里
    audio: [{
        name: '歌曲',
        lrc: 'lyrics.lrc'
    }]
});

// ❌ 错误：lrcType 放在 audio 里了
const ap = new APlayer({
    audio: [{
        name: '歌曲',
        lrcType: 3,      // ← 这个位置错了
        lrc: 'lyrics.lrc'
    }]
});

2. LRC 文件的时间戳格式对不对

APlayer 支持以下时间戳语法：

✅ 正确格式：
[00:15]歌词
[00:15.50]歌词
[00:15.500]歌词
[00:15.50][00:20.00]同一行两次出现
[00:15.50]<00:20.00>尖括号形式

❌ 错误格式（常见）：
[00:15:30]  ← 多了一段（分:秒:毫秒）
[0:15.50]   ← 分钟没补零
<00:15.50>  ← 单独尖括号（需要搭配方括号）

3. 时间戳有没有按时间升序排列

APlayer 不自动排序时间戳。如果你的 LRC 文件时间戳是乱的：

❌ 乱序：
[00:20.00]第三行
[00:05.00]第一行
[00:10.00]第二行

✅ 正确：
[00:05.00]第一行
[00:10.00]第二行
[00:20.00]第三行

乱序的时间戳会导致歌词"跳过"或不显示。

4. audio.lrc 有没有正确传入每首歌

如果你用 JS 字符串方式或 LRC 文件方式，需要给每首需要歌词的歌曲都设置 lrc 字段：

// ✅ 正确
audio: [
    { name: '歌曲一', url: '1.mp3', lrc: 'lyrics/1.lrc' },
    { name: '歌曲二', url: '2.mp3', lrc: 'lyrics/2.lrc' },
    { name: '歌曲三', url: '3.mp3' }  // 没有 lrc = 不显示歌词
]

如果是 HTML 内嵌方式（lrcType: 2），确保 HTML 里的 <pre class="aplayer-lrc-content"> 数量和顺序与 audio 数组对应。

5. LRC 文件加载成功了吗

如果用 LRC 文件方式（lrcType: 3），检查：

• 浏览器能直接打开 audio.lrc 里写的那个 URL 吗？
• DevTools Network 面板里这个请求的状态码是 200 还是 404？
• Console 有没有跨域错误？
• 文件编码是 UTF-8 吗？（GBK 编码的中文歌词可能解析失败）

6. 歌曲本身有没有在播放

这听起来很蠢但是真的——如果歌曲没有在播放（暂停或还没开始），歌词当然不会滚动。检查 ap.audio.paused 是否为 false。

7. lrc.show() 能不能让歌词出现

尝试手动调用：

ap.lrc.show();

如果歌词区域仍然空白，说明数据层面就没传对。如果歌词区域出现了但不滚动，说明数据传对了但时间戳格式有问题。

快速定位流程

歌词不滚动
  ├─ 调用 ap.lrc.show()
  │   ├─ 区域仍空白 → 检查 lrcType + lrc 字段 + LRC 格式
  │   └─ 区域出现但不滚动 → 检查时间戳格式 + 排序
  ├─ 检查 lrcType 位置 → 顶层参数，不是 audio 内部
  ├─ 检查 audio.lrc → 每首有歌词的歌都需要
  ├─ 打开 DevTools Console → 有没有错误
  └─ 检查时间戳格式 → 用编辑器打开 .lrc 文件逐行看