lrc-player文档

欢迎广大开发者将此文档翻译为其他语言。

CDN引入方式

必须引入lrc-player.js

可选引入lrc-player.css

NPM安装

$ npm install @yuhongbo1/lrc-player

import引入方式

import LrcPlayer from 'path/to/@yuhongbo1/lrc-player';

require引入方式

const LrcPlayerClass = require("path/to/@yuhongbo1/lrc-player");

如何使用

初始化LRC文件，生成与LRC文件相关的所有div

const player = LrcPlayer.init(lrcText);

播放LRC文件

player.play();

暂停播放LRC文件

player.pause();

继续播放LRC文件

player.resume();

重新播放LRC文件

player.replay();

删除与LRC文件相关的所有div，重置LRC文件播放状态

player.destroy();

设置LRC文件播放进度（秒）

player.setTimeSecond(seconds);

设置LRC文件播放进度（毫秒）

player.setTimeMillisecond(milliseconds);

在线演示

仅使用lrc-player.js，而不使用lrc-player.css

同时使用lrc-player.js和lrc-player.css

常见用例

HTML播放器

在HTML播放器中，可以将本项目用于歌词滚动显示。

纵向滚动显示字幕

本项目可以将字幕纵向滚动显示，只需要将字幕按LRC格式编写即可。

提词器

本项目可以用作提词器，在直播、视频录制或音频录制场景中使用。

引用lrc-player

如果你在学术研究中涉及lrc-player，那么可以按需引用以下内容。

lrc-player源码(BibTeX)

@misc{CNOCTAVE2025, author = {Yu Hongbo, }, title = {lrc-player}, year = {2025}, howpublished = {\url{https://github.com/CNOCTAVE/lrc-player}}, }

lrc-player文档(BibTeX)

@techreport{CNOCTAVE2025, author = {Yu Hongbo, }, title = {lrc-player Document}, institution = {BA DU XIN SHANG}, year = {2025}, number = {16}, month = {6}, url = {https://cnoctave.github.io/lrc-player/index.html}, urldate = {2025-06-16}, }

Exploring the Functionality and Applications of lrc-player: A Browser-Based LRC File Player(BibTeX)

@article{https://doi.org/10.31224/4702, doi = {10.31224/4702}, url = {https://engrxiv.org/preprint/view/4702}, author = {Yu Hongbo, }, keywords = {CNOCTAVE, lrc-player, LRC file, browser-based player, lyrics synchronization, open-source project}, title = {Exploring the Functionality and Applications of lrc-player: A Browser-Based LRC File Player}, publisher = {engrxiv}, year = {2025}, copyright = {Creative Commons Attribution 4.0 International} }