san-lyric

 npm install san-lyric --save

1. Methods(方法)

getScreenFps ----> 获取屏幕刷新率

在 App.tsx 中调用获取 fps 并进行保存，方便后续调用。

getScreenFps?.().then((fps: number) => {
  console.log("当前屏幕刷新率为", fps);
  // todo code
});

2. Components(组件)

Lyric ----> 歌词显示组件

展示歌词的组件

Props

| Name | Desc | Type | Default | Required | | --------------- | --------------------------- | ----------------- | ------- | -------- | | lyrics | 歌词数据 a | LyricItemType[] | [] | true | | currentTime | 歌曲播放当前进度 ms毫秒级 | number | 0 | true | | duration | 歌曲总时长 ms毫秒级 | number | 0 | true | | fps | 屏幕刷新率 | number | 0 | true | | color | 文本颜色 | Color | | false | | selectColor | 播放时文本颜色 | Color | | false | | selectBgColor | 播放时文本背景颜色 | Color | | false |

3. Hooks

useLyricData (格式化歌词)

需要传递原文歌词和译文歌词

| Name | Desc | Type | Default | Required | | --------- | -------- | -------- | ------- | -------- | | lyric | 原文歌词 | string | | true | | t_lyric | 译文歌词 | string | | true |

4. Type(类型)

LyricItemType

| Name | Desc | Type | Default | Required | | --------- | ------------------ | -------- | ------- | -------- | | lyric | 原文歌词 | string | | true | | t_lyric | 译文歌词 | string | | true | | time | 展示当前歌词的时间 | number | 0 | true |

Example ( React )

const BaseLyric = memo(({ id, currentTime, duration }: IBaseLyricProps) => {
  // const { data, runAsync } = useRequest(getLyricData, {
  //   manual: true,
  // });

  const lyricData = useLyricData(
    data?.lrc.lyric ?? "",
    data?.romalrc.lyric ?? ""
  );
  useAsyncEffect(async () => {
    if (id !== "") {
      await runAsync(id);
    }
  }, [id]);

  return (
    <div className="lyric-container">
      <Lyric
        lyrics={lyricData ?? []}
        currentTime={currentTime}
        duration={duration}
        fps={60}
      />
    </div>
  );
});