Skip to content

README.md

Latest commit

 

History

History
83 lines (58 loc) · 3.25 KB

README.md

File metadata and controls

83 lines (58 loc) · 3.25 KB

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-Core npm npm

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

Features

  • Pure frontend rendering for lyrics and background
  • Word-level timed lyrics with translation and romanization
  • Multi-line, duet, and background line support
  • Style customization via CSS variables

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.

Data Model

Lyrics input is LyricLine[], with each line containing:

  • words: timed word array, each word includes startTime / endTime / word, with optional romanWord, ruby, and obscene
  • translatedLyric: translation text
  • romanLyric: romanization text
  • startTime / endTime: line timestamps
  • isBG / isDuet: background and duet flags

Styling

The main styles are provided by @applemusic-like-lyrics/core/style.css. Common overrides are via CSS variables:

.amll-lyric-player {
  --amll-lp-color: #ffffff;
  --amll-lp-bg-color: rgba(0, 0, 0, 0.35);
}

Development

pnpm -C packages/core dev
pnpm -C packages/core build