React Karaoke is a customizable, accessible audio player for React that syncs audio with scrolling lyrics.
Work in Progress. This project is not yet ready for prime time.
npm install react-karaoke
or
yarn add react-karaoke
import { Karaoke, Lyrics, Player } from "react-karaoke";
const KaraokePlayer = () => (
<Karaoke>
<Player src="audio.mp3" />
<Lyrics srt="lyrics.srt" />
</Karaoke>
);
Provider component that keeps the <Player />
and <Lyrics />
in sync.
All props except for onUpdate
callback are passed to the underlying audio element. See docs for more info.
Prop | Description | Required |
---|---|---|
src |
string | Yes |
crossorigin |
null, "anonymous", "use-credentials" | No |
loop |
boolean | No |
muted |
boolean | No |
preload |
boolean | No |
onUpdate |
(audioState: AudioState) => void | No |
interface AudioState {
currentTime: number;
duration: number;
paused: boolean;
canplaythrough: boolean;
ended: boolean;
}
Prop | Description | Required |
---|---|---|
srt |
valid SRT string | Yes |