San-lyric NPM | npm.io

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>
  );
});