# LyricsControl

**Repository Path**: ailjx/lyrics-control

## Basic Information

- **Project Name**: LyricsControl
- **Description**: 一个类，一个简单的歌词滚动生成器。输入容器的CSS选择器和歌词，一键生成效果。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-24
- **Last Updated**: 2022-11-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LyricsControl

# 介绍

一个类，一个简单的歌词滚动生成器。输入容器的`CSS`选择器和歌词字符串，一键在指定容器中生成歌词滚动效果。

# 参数说明

```javascript
/**
 * 在指定容器中生成歌词滚动
 * @param {string} container 全局容器选择器
 * @param {string} audio audio标签选择器
 * @param {string} words 歌词字符串
 */
const a = new LyricsControl(container, audio, words);
// 开启歌词滚动
a.play();
// 清除歌词滚动
a.clear();
// 获取当前启动状态
a.isRoll;
```

# 功能

-   一键生成歌词滚动效果
-   支持动态开关
-   支持鼠标滚轮滑动
-   支持移动端触控滑动
-   支持自定义 CSS
-   后续补充...

# 使用案例

HTML 结构：

```html
<div id="container"></div>
```

JS 模块使用：

```javascript
// 歌词结构
const words =
    "[00:04.050]\n[00:12.570]难以忘记初次见你\n[00:16.860]一双迷人的眼睛\n[00:21.460]在我脑海里\n[00:23.960]你的身影 挥散不去\n";

// 获取LyricsControl实例
const a = new LyricsControl("#container", "#audio", words);
// 开启歌词滚动
a.play();
// 清除歌词滚动
a.clear();
// 获取当前启动状态
a.isRoll;
```

定制 CSS，最终生成的 DOM 结构如下：

```html
<div id="container">
    <ul id="lrc-list">
        <li>歌词</li>
        <li>歌词</li>
        <li>歌词</li>
        <li>....</li>
    </ul>
</div>
```

> 可以根据`ul`的`id`自定义歌词样式。