AMLL Core
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!
AMLL's pure JS core component framework, including lyric display components and background components and other reusable components.
Everything here is UI framework-independent, so it can be indirectly referenced under various dynamic page frameworks.
Or if you need to use component bindings, there's a React binding version and a Vue binding version
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 # using npm
yarn add @pixi/app @pixi/core @pixi/display @pixi/filter-blur @pixi/filter-bulge-pinch @pixi/filter-color-matrix @pixi/sprite # using yarn
Install the framework:
npm install @applemusic-like-lyrics/core # using npm
yarn add @applemusic-like-lyrics/core # using yarn
Usage Summary
For detailed API documentation, please refer to ./docs/modules.md
A test program can be found in ./src/test.ts.
import { LyricPlayer } from "@applemusic-like-lyrics/core";
import "@applemusic-like-lyrics/core/style.css"; // Import required styles
const player = new LyricPlayer(); // Create a lyric player component
document.body.appendChild(player.getElement()); // Add the component's element to the page
player.setLyricLines([]) // Set lyrics
player.setCurrentTime(0) // Set current playback time (needs to be called every frame)
player.update(0) // Update lyric component animation (needs to be called every frame)
The lyrics set through LyricPlayer.setLyricLines is a LyricLine[] parameter. For details, please refer to the code in ./src/interfaces.ts.