AMLL 核心

英文/英文 简体中文

警告: 这是一个个人项目,仍在开发中。 可能还有许多问题,所以请不要在生产环境中直接使用!

MALL的纯JS核心组件框架,包括lyric显示组件和背景组件以及其他可再用组件.

这里的一切都是UI框架独立的,因此可以在各种动态页面框架下间接地被引用.

或者,如果你需要使用组件绑定,有一个 反应绑定版本 (单位:千美元) Vue 绑定版本

特征

• 歌词和背景的纯前端渲染
• 带有翻译和罗马化的词层定时歌词
• 多行、 二重奏和背景线支持
• 通过 CSS 变量定制样式

安装

安装所需的依赖( 如果以下列出的依赖没有安装, 您需要自己安装):

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

安装框架 :

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

使用摘要

关于详细的API文档,请参见: AMLL 文档。 。 。 .

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)

歌词设定通过 LyricPlayer.setLyricLines 是一个 LyricLine[] 参数。 关于详细情况,请参见: ./弧/接口.ts。 。 。 .

数据模型

词组输入为 LyricLine[],每行包含:

• words: 计时字数组,每个字包括 startTime 编号 : endTime 编号 : word,可选 romanWord, (中文(简体) ), ruby,以及 obscene
• translatedLyric: 翻译文本
• romanLyric: 罗马化文本
• startTime 编号 : endTime:行时间戳
• isBG 编号 : isDuet: 背景和二重奏旗帜

样式

主作风格由: @applemusic-like-lyrics/core/style.css。常见的覆盖通过 CSS 变量:

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

发展

pnpm --filter @applemusic-like-lyrics/core dev
pnpm --filter @applemusic-like-lyrics/core build