Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/simsv-software/simlrc
SimMusic 同款，轻量而美观的 Web 歌词组件
https://github.com/simsv-software/simlrc
Last synced: about 2 months ago
JSON representation
SimMusic 同款，轻量而美观的 Web 歌词组件
- Host: GitHub
- URL: https://github.com/simsv-software/simlrc
- Owner: Simsv-Software
- License: mit
- Created: 2024-08-05T13:22:30.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-09T12:10:03.000Z (5 months ago)
- Last Synced: 2024-08-15T16:51:17.293Z (4 months ago)
- Language: JavaScript
- Homepage: https://yanji314.github.io/SimLRC/demo/
- Size: 2.74 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SimLRC
轻量而美观的 Web 歌词组件
## 主要特色
- CSS + JS 快速引入，无需任何依赖项
- 支持歌词中同行存在多个时间标签
- 支持将时间标签相同的歌词作为双语翻译合并输出
- 界面优雅，支持配置层级模糊，如预览图所示
- 支持自动去除无关内容和空行
## 在线演示站
https://yanji314.github.io/SimLRC/demo/
## 基本用法
1. 引入 SimLRC 的 css 和 js 文件
```html
```
2. 准备一个 audio 元素和一个歌词容器
```html
```
3. 构造一个 SimLRC 实例
```javascript
const lrc = new SimLRC("");
```
4. 使用默认配置渲染歌词
```javascript
lrc.render(document.getElementById("container"), document.getElementById("audio"));
```
## 按需求配置
在「渲染」一步，`lrc.render` 方法支持传入第三个参数用于进行配置。
```javascript
lrc.render(document.getElementById("container"), document.getElementById("audio"), options);
```
`options` 支持传入以下参数：
```javascript
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。