轻量而美观的 Web 歌词组件
- CSS + JS 快速引入,无需任何依赖项
- 支持歌词中同行存在多个时间标签
- 支持将时间标签相同的歌词作为双语翻译合并输出
- 界面优雅,支持配置层级模糊,如预览图所示
- 支持自动去除无关内容和空行
https://simsv-software.github.io/SimLRC/demo/
- 引入 SimLRC 的 css 和 js 文件
<link rel="stylesheet" href="path/to/simlrc.css"> <script src="path/to/simlrc.js"></script>
- 准备一个 audio 元素和一个歌词容器
<audio src="path/to/music.mp3" controls id="audio"></audio> <div id="container"></div>
- 构造一个 SimLRC 实例
const lrc = new SimLRC("<LRC 格式的字符串>");
- 使用默认配置渲染歌词
lrc.render(document.getElementById("container"), document.getElementById("audio"));
在「渲染」一步,lrc.render 方法支持传入第三个参数用于进行配置。
lrc.render(document.getElementById("container"), document.getElementById("audio"), options);
options 支持传入以下参数:
const options = { blurStep: 1, // 上下歌词模糊层级,设为 0 以禁用此功能,推荐在移动设备禁用 blurMin: 2, // 最小歌词模糊级别 blurMax: 5, // 最大歌词模糊级别,设为 0 以禁用此功能 normalColor: "#00000088", // 歌词闲置状态字体颜色 activeColor: "#000000", // 歌词聚焦状态字体颜色 clickUpdate: true, // 是否支持用户通过点击歌词调整播放进度 multiLangSupport: true, // 开启多语言支持,开启后时间标签相同的不同歌词将作为多语言翻译渲染 align: "center", // 文字排版方式,支持 left、center、right inactiveZoom: .8, // 歌词闲置状态缩放大小,设为 1 以禁止缩放 lineSpace: .8, // 歌词行距倍数,设为 0 以使用紧凑布局 scrollTimeout: 3000, // 在用户进行滚动操作后 n 毫秒后恢复自动滚动歌词 callback: console.log // 在歌词更新时,将调用 callback(text),用于设置网页标题等需求使用 };
仅兼容各主流内核最新版本,有兼容性需求请自行添加 Polyfill。