HTML 内嵌方式传递歌词

适用场景

HTML 内嵌方式把歌词直接写在 HTML 页面里。适合：

• 使用静态 HTML 模板生成页面（如 Jekyll、Hugo、Hexo 的模板语法）
• 歌词是固定的、不打算频繁更换
• 不想写 JavaScript 来传递歌词内容
• 页面内容（包括歌词）由 CMS 或 Markdown 生成

三个参数配合

代码示例

<link rel="stylesheet" href="APlayer.min.css">

<div id="player">
    <!-- 第一首歌的歌词 -->
    <pre class="aplayer-lrc-content">
[00:00.00]歌曲一标题
[00:05.00]歌曲一第一行歌词
[00:10.00]歌曲一第二行歌词
    </pre>

    <!-- 第二首歌的歌词 -->
    <pre class="aplayer-lrc-content">
[00:00.00]歌曲二标题
[00:03.00]歌曲二第一行歌词
[00:08.00]歌曲二第二行歌词
    </pre>
</div>

<script src="APlayer.min.js"></script>
<script>
const ap = new APlayer({
    container: document.getElementById('player'),
    lrcType: 2,  // HTML 内嵌方式
    audio: [
        { name: '歌曲一', artist: 'A', url: '1.mp3', cover: '1.jpg' },
        { name: '歌曲二', artist: 'B', url: '2.mp3', cover: '2.jpg' }
    ]
});
</script>

规则说明

• 容器内有几个歌词容器元素，对应 audio 数组里的前几个元素
• 如果歌词容器数量少于 audio 数组长度，后面的歌曲不会显示歌词
• 歌词容器元素会被 APlayer 自动隐藏——它只是歌词的数据源，不会渲染出来

在模板引擎中使用

HTML 内嵌方式在模板引擎（Jekyll、Hugo、Hexo、Nunjucks 等）中特别好用：

Jekyll 示例

<div id="player">
    {% for song in site.data.playlist %}
    <pre class="aplayer-lrc-content">{{ song.lrc }}</pre>
    {% endfor %}
</div>

Hugo 示例

<div id="player">
    {{ range .Params.playlist }}
    <pre class="aplayer-lrc-content">{{ .lrc }}</pre>
    {{ end }}
</div>

三种方式总结

三种方式的选择完全取决于你的歌词来源和工程架构——它们在运行时表现完全相同，只是数据传递的途径不一样。

常见问题

歌词容器标签里的缩进

HTML 里的空白字符会被保留。如果你在歌词容器里面缩进了 LRC 内容，这些缩进空格会成为歌词的一部分，可能导致解析问题。建议：

<!-- 好：紧贴标签 -->
<pre class="aplayer-lrc-content">[00:00.00]标题
[00:05.00]歌词
</pre>

<!-- 可能有问题：有缩进 -->
<pre class="aplayer-lrc-content">
    [00:00.00]标题
    [00:05.00]歌词
</pre>

HTML 特殊字符

歌词容器里的歌词如果包含 HTML 特殊字符（如小于号、大于号、与符号），需要用对应的 HTML 实体转义。APlayer 内部会处理 LRC 解析，但浏览器的 HTML 解析阶段会先处理这些字符。