mirror of https://github.com/lqtmcstudio/QZMusic_PC.git synced 2026-06-20 23:35:06 +08:00

Files

lqtmcstudio 72f4510dc8 fork(fix): Clone AMLL 并修复 BUG

- 将AMLL Clone到本以地进行修复和优化(emm虽然这很不优雅但是暂时无时间做子模块和Fork)
- 修复在当前播放歌词行不可见的视口Seek会出现滚动偏移的问题

2026-06-07 00:02:14 +08:00

3.2 KiB

Raw Permalink Blame History

AMLL Core

English / 简体中文

警告：此为个人项目，且尚未完成开发，可能仍有大量问题，所以请勿直接用于生产环境！

AMLL 的纯 JS 核心组件框架，包括歌词显示组件和背景组件等其它可以复用的组件。

此处的东西都是 UI 框架无关的，所以可以间接在各种动态页面框架下引用。

或者如果你需要使用组件绑定的话，这里有 React 绑定版本和 Vue 绑定版本

特性

纯前端渲染的歌词展示与背景渲染
动态逐字歌词、翻译与音译显示
支持多行、对唱与背景行
可通过 CSS 变量自定义颜色与部分表现

安装

安装使用的依赖（如果以下列出的依赖包没有安装的话需要自行安装）：

npm install @pixi/app @pixi/core @pixi/display @pixi/filter-blur @pixi/filter-bulge-pinch @pixi/filter-color-matrix @pixi/sprite # 使用 npm
yarn add @pixi/app @pixi/core @pixi/display @pixi/filter-blur @pixi/filter-bulge-pinch @pixi/filter-color-matrix @pixi/sprite # 使用 yarn

安装本体框架：

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

使用方式摘要

详细的 API 文档请参考 ./docs/modules.md

一个测试用途的程序可以在 ../playground/core/src/test.ts 里找到。

import { LyricPlayer } from "@applemusic-like-lyrics/core";
import "@applemusic-like-lyrics/core/style.css"; // 导入需要的样式

const player = new LyricPlayer(); // 创建歌词播放组件
document.body.appendChild(player.getElement()); // 将组件的元素添加到页面
player.setLyricLines([]) // 设置歌词
player.setCurrentTime(0) // 设定当前播放时间（需要逐帧调用）
player.update(0) // 更新歌词组件动画（需要逐帧调用）

每次通过 LyricPlayer.setLyricLines 设置的歌词是一个 LyricLine[] 参数，具体可以参考 ./src/interfaces.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

3.2 KiB Raw Permalink Blame History