APlayer 中文文档 下载 App

JS 字符串方式传递歌词

适用场景

JS 字符串方式把歌词直接写在初始化代码里。适合：

三个参数配合

参数值含义
lrcType1告诉 APlayer 歌词是 JS 字符串
audio.lrc字符串内容直接写 LRC 格式的字符串

代码示例

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    lrcType: 1,  // JS 字符串方式
    audio: {
        name: '歌曲名称',
        artist: '艺术家',
        url: 'audio.mp3',
        cover: 'cover.jpg',
        lrc: '[00:00.00]歌曲标题\n[00:04.01]第一行歌词\n[00:08.02]第二行歌词\n[00:12.03]第三行歌词'
    }
});

注意每一行之间用 \n（换行符）分隔。

使用数组拼接更清晰

长歌词用 \n 连接看起来很乱。推荐用数组的 join('\n')：

const lrcContent = [
    '[00:00.00]歌曲标题',
    '[00:01.00]艺术家 - 歌曲名',
    '[00:05.00]第一行歌词',
    '[00:10.50]第二行歌词',
    '[00:15.00]第三行歌词',
    '[00:20.25]间奏',
    '[00:25.00]第四行歌词',
    // ... 更多行
].join('\n');

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    lrcType: 1,
    audio: {
        name: '歌曲名称',
        artist: '艺术家',
        url: 'audio.mp3',
        cover: 'cover.jpg',
        lrc: lrcContent
    }
});

动态获取歌词后传入

JS 字符串方式最大的优势是可以灵活处理——比如从 MetingJS 或其他 API 获取歌词后直接传入：

fetch('Meting API 端点')
    .then(res => res.json())
    .then(data => {
        const ap = new APlayer({
            container: document.getElementById('aplayer'),
            lrcType: 1,
            audio: data.map(item => ({
                name: item.name,
                artist: item.artist,
                url: item.url,
                cover: item.cover,
                lrc: item.lrc  // Meting 返回的就是 LRC 格式字符串
            }))
        });
    });

与文件方式对比

对比项JS 字符串（lrcType: 1）LRC 文件（lrcType: 3）
HTTP 请求零请求每个有歌词的歌曲一个请求
歌词量适合短小适合任意长度
代码整洁度歌词嵌在 JS 里歌词独立管理
复用性差（每次重新写一遍）好（.lrc 文件可以被多个播放器引用）
推荐场景单首 / 动态获取多首 / 固定列表

与 HTML 内嵌方式对比

三种方式各有适用场景，选择哪一种主要看你的歌词来源：

方式lrcType歌词放哪里
JS 字符串1audio.lrc 里写 LRC 文本
HTML 内嵌2HTML 页面里的 <pre class="aplayer-lrc-content"> 标签
LRC 文件3独立的 .lrc 文件，audio.lrc 指向 URL

常见问题

中文歌词乱码

JS 字符串方式在 UTF-8 编码的页面里不会有乱码问题。如果出现乱码，检查：

  1. HTML 页面的 <meta charset="utf-8"> 是否正确
  2. JavaScript 文件的编码是否为 UTF-8

多行时间戳的支持

APlayer 支持 [mm:ss.xx][mm:ss.xx]歌词 这种多个时间戳在同一行的格式。详见 歌词格式规范。