React Lyrics

React Component for Making and Display Lyrics of A Song

Playground: https://allape.github.io/React-Lyrics/

TODO

• Basic Mode
• Karaoke Mode
• Lyrics Creator

Practical Project

• Homesong: https://github.com/allape/homesong
  • Song Management for Home NAS

Installation

npm install github:allape/React-Lyrics

Usage

See SimplePlayer for complete demo.

import { Lyrics, TimePoint, useRAFAudioTime } from '@allape/lyrics';
import { ReactElement, useCallback } from 'react';

export function Display({ text, karaoke }: Props): ReactElement {
  const [audio, setAudio] = useState<HTMLAudioElement | null>(null);
  const [current] = useRAFAudioTime(audio);

  const handleChange = useCallback((tp: TimePoint) => {
    if (!audio) {
      return;
    }
    audio.currentTime = tp / 1000;
  }, [audio]);

  return <>
    <auido ref={setAudio} src={url} controls/>
    <Lyrics
      current={current}
      content={text}
      karaoke={karaoke}
      onChange={handleChange}
    />
  </>;
}

Dev

npm install
npm run dev

File Format

See 唐朝乐队 - 国际歌 / Tang Dynasty - L'Internationale for example.

Credits

• favicon.png: https://www.irasutoya.com/2013/05/blog-post_7121.html
  • Terms(ご利用規定): https://www.irasutoya.com/p/terms.html
• 英特纳雄耐尔.ogg: https://zh.wikipedia.org/wiki/File:Internationale.ogg