AMLL for React

English / 简体中文

Warning: This is a personal project and is still under development. There may still be many issues, so please do not use it directly in production environments!

React binding for the AMLL component library, which allows you to use AMLL lyric components more conveniently.

For more details, please visit Core component README.md.

Installation

Install the required dependencies (if the dependencies listed below are not installed, you need to install them yourself):

npm install @pixi/app @pixi/core @pixi/display @pixi/filter-blur @pixi/filter-bulge-pinch @pixi/filter-color-matrix @pixi/sprite jss jss-preset-default # using npm
yarn add @pixi/app @pixi/core @pixi/display @pixi/filter-blur @pixi/filter-bulge-pinch @pixi/filter-color-matrix @pixi/sprite jss jss-preset-default # using yarn

Install the dependencies required for React binding (if the dependencies listed below are not installed, you need to install them yourself):

npm install react react-dom # using npm
yarn add react react-dom # using yarn

Install the framework:

npm install @applemusic-like-lyrics/react # using npm
yarn add @applemusic-like-lyrics/react # using yarn

Usage Summary

For detailed API documentation, please refer to ./docs/modules.md

A test program can be found in ../playground/react/src/test.tsx.

import { LyricPlayer } from "@applemusic-like-lyrics/react";

const App = () => {
    const [currentTime, setCurrentTime] = useState(0);
	const [lyricLines, setLyricLines] = useState<LyricLine[]>([]);
    return <LyricPlayer lyricLines={lyricLines} currentTime={currentTime} />
};