diff --git a/README-CN.md b/README-CN.md index 06144338..3959c94f 100644 --- a/README-CN.md +++ b/README-CN.md @@ -1,105 +1,35 @@
-![Apple Music-like Lyrics - A lyric page component library for Web](https://github.com/user-attachments/assets/ca6a98d4-28ea-4fb6-beec-7948f2ac87ec) - -# Apple Music-like Lyrics +# AMLL Player [English](./README.md) / 简体中文 -一个基于 Web 技术制作的类 Apple Music 歌词显示组件库,同时支持[ DOM 原生](./packages/core/README.md)、[React ](./packages/react/README.md)和[ Vue ](./packages/react/README.md)绑定。 - -这是你能在前端系里能见到的最像 iPad Apple Music 的播放页面了。 - -尽管这个项目的目标并非完全模仿,但是会更好地打磨一些细节,以优于现阶段最好的歌词播放器。 - -**—— AMLL 生态作品 ——** - -[AMLL TTML DB 逐词歌词仓库](https://github.com/amll-dev/amll-ttml-db) - -[AMLL TTML Tool 逐词歌词编辑器](https://github.com/amll-dev/amll-ttml-tool) -/ -[AMLL Editor 下一代逐词歌词编辑器](https://github.com/amll-dev/amll-editor) - -[AMLL Player 本地播放器](./packages/player/README-CN.md) -/ -[AMLL Page 网页播放器](https://github.com/apoint123/amll-page) - - -[引用了 AMLL 的项目汇总](https://github.com/amll-dev/applemusic-like-lyrics/discussions/397) +一个通过 本地音乐文件/WebSocket Server 获取音频播放信息的独立歌词页面播放器。
-## AMLL 生态及源码结构 - -### 主要模块 - -- [![AMLL-Core](https://img.shields.io/badge/Core-%233178c6?label=Apple%20Music-like%20Lyrics&labelColor=%23FB5C74)](./packages/core/README.md):AMLL 核心组件库,以 DOM 原生方式编写,提供歌词显示组件和动态流体背景组件 -- [![AMLL-React](https://img.shields.io/badge/React-%23149eca?label=Apple%20Music-like%20Lyrics&labelColor=%23FB5C74)](./packages/react/README.md):AMLL React 绑定,提供 React 组件形式的歌词显示组件和动态流体背景组件 -- [![AMLL-Vue](https://img.shields.io/badge/Vue-%2342d392?label=Apple%20Music-like%20Lyrics&labelColor=%23FB5C74)](./packages/vue/README.md):AMLL Vue 绑定,提供 Vue 组件形式的歌词显示组件和动态流体背景组件 -- [![AMLL-Lyric](https://img.shields.io/badge/Lyric-%23FB8C84?label=Apple%20Music-like%20Lyrics&labelColor=%23FB5C74)](./packages/lyric/README.md):AMLL 歌词解析模块,提供对 LyRiC, YRC, QRC, Lyricify Syllable 各种歌词格式的解析和序列化支持 - -## 浏览器兼容性提醒 - -本组件框架最低要求使用以下浏览器或更新版本: - -- Chromuim/Edge 91+ -- Firefox 100+ -- Safari 9.1+ - -完整呈现组件所有效果需要使用以下浏览器或更新版本: -- Chromuim 120+ -- Firefox 100+ -- Safari 15.4+ +## 功能/特性列表: -参考链接: +- 与任何实现 AMLL WS Protocol 的客户端进行通信,同步播放信息进度,并获取对应的歌词以进行播放展示 +- 支持读取本地音频文件播放,或加载本地歌词文件 +- 支持加载各种歌词格式 +- 高性能 —— 不会因为某些软件自身问题导致歌词展示效果受到影响 +- 预计支持播放状态传输协议:[SMTC (Windows)](https://learn.microsoft.com/en-us/uwp/api/windows.media.systemmediatransportcontrols?view=winrt-26100) / [MPRIS (Linux/XDG)](https://www.freedesktop.org/wiki/Specifications/mpris-spec/) / [MPNowPlayingInfoCenter (macOS)](https://developer.apple.com/documentation/mediaplayer/mpnowplayinginfocenter) -- [https://caniuse.com/mdn-css_properties_mask-image](https://caniuse.com/mdn-css_properties_mask-image) -- [https://caniuse.com/mdn-css_properties_mix-blend-mode_plus-lighter](https://caniuse.com/mdn-css_properties_mix-blend-mode_plus-lighter) +## 安装使用 -## 性能配置参考 +由于播放器还在兼容状态,所以仅可通过 [Github Action](https://github.com/amll-dev/amll-player/actions/workflows/build-player.yaml) 下载开发构建,日后会推出正式版。 -经过性能基准测试,五年内的主流 CPU 处理器均可以以 30FPS 正常带动歌词组件,但如果需要 60FPS 流畅运行,请确保 CPU 频率至少为 3.0Ghz 或以上。如果需要 144FPS 以上流畅运行,请确保 CPU 频率至少为 4.2Ghz 或以上。 +## 为什么会有这个? -GPU 性能在以下状况下能够以预期尺寸下满 60 帧运行: +歌词播放器相当于外挂字幕一样的软件,在独立于插件环境以外的环境播放歌词。 -- `1080p (1920x1080)`: NVIDIA GTX 10 系列及以上 -- `2160p (3840x2160)`: NVIDIA RTX 2070 及以上 +经过作者的性能测试,发现以插件形式嵌入到播放页面会因为插件运行环境自身浏览器框架问题导致掉帧和不定卡顿的问题。 -## 开发/构建/打包流程 +故作者决定将播放页面分离到一个独立的桌面程序进行以提高播放性能和效果,而原插件则负责将播放的信息和状态传递给歌词播放器。 -### 前置依赖 - -- [Node.js](https://nodejs.org/) -- [pnpm](https://pnpm.io/) -- [Rust 工具链](https://rustup.rs/) -- [wasm-pack](https://rustwasm.github.io/wasm-pack/) - -如需构建 **AMLL Player** 桌面端应用,还需额外安装: - -- 对应平台的 [Tauri 前置依赖](https://tauri.app/start/prerequisites/) - -### 构建组件库 - -克隆本仓库后,在项目根目录执行以下指令: - -```bash -# 安装依赖 -pnpm install - -# 生产构建所有库包 -pnpm build:libs -``` - -### 构建单个包 - -```bash -# 示例:仅构建 @applemusic-like-lyrics/core -pnpm nx run @applemusic-like-lyrics/core:build - -# 示例:开发构建 @applemusic-like-lyrics/lyric -pnpm nx run @applemusic-like-lyrics/lyric:build:dev -``` +因此如果你也有少许卡顿现象,可以尝试使用这个歌词播放器,性能应该可以有所改善。 ### 构建 AMLL Player 桌面端应用 @@ -109,7 +39,7 @@ pnpm tauri build # 发行构建 pnpm tauri dev # 开发模式 ``` -## 鸣谢 +### 鸣谢 - [woshizja/sound-processor](https://github.com/woshizja/sound-processor) - [FFmpeg](http://ffmpeg.org/) diff --git a/README.md b/README.md index 1f84826b..839052fa 100644 --- a/README.md +++ b/README.md @@ -1,104 +1,35 @@
-![Apple Music-like Lyrics - A lyric page component library for Web](https://github.com/user-attachments/assets/ca6a98d4-28ea-4fb6-beec-7948f2ac87ec) +# AMLL Player English / [简体中文](./README-CN.md) -
- -
- -A lyric player component library that aims to look similar to iPad version of Apple Music. With [DOM](./packages/core/README.md), [React](./packages/react/README.md) and [Vue](./packages/vue/README.md) bindings. [Also there's a standalone player based on it!](./packages/player/README.md) - -This is perhaps the most iPad Apple Music-like lyric page you've seen in frontend. - -Although the goal of this project is not to imitate it completely, it will polish some details to be better than the current best lyric players. - -**—— AMLL Series Projects ——** - -[AMLL TTML DB - TTML Syllable Lyric Database](https://github.com/amll-dev/amll-ttml-db) -/ -[AMLL TTML Tool - TTML Syllable Lyric Editor](https://github.com/amll-dev/amll-ttml-tool) - -[Projects that references AMLL](https://github.com/amll-dev/applemusic-like-lyrics/discussions/397) +An independent lyrics page player that obtains audio playback information through local music files/WebSocket Server.
-## AMLL Ecology and source code structure - -### Main modules - -- [![AMLL-Core](https://img.shields.io/badge/Core-%233178c6?label=Apple%20Music-like%20Lyrics&labelColor=%23FB5C74)](./packages/core/README.md): AMLL Core Component Library, written natively with DOM, provides lyric display component and dynamic fluid background component -- [![AMLL-React](https://img.shields.io/badge/React-%23149eca?label=Apple%20Music-like%20Lyrics&labelColor=%23FB5C74)](./packages/react/README.md): AMLL React binding, provides React component forms of lyric display and dynamic fluid background components -- [![AMLL-Vue](https://img.shields.io/badge/Vue-%2342d392?label=Apple%20Music-like%20Lyrics&labelColor=%23FB5C74)](./packages/vue/README.md): AMLL Vue binding, provides Vue component forms of lyric display and dynamic fluid background components -- [![AMLL-Lyric](https://img.shields.io/badge/Lyric-%23FB8C84?label=Apple%20Music-like%20Lyrics&labelColor=%23FB5C74)](./packages/lyric/README.md): AMLL lyric parsing module, provides parsing and serialization support for various lyric formats including LyRiC, YRC, QRC, and Lyricify Syllable - -## AMLL Player Preview Gallery - -![AMLL Player Preview](https://github.com/user-attachments/assets/2b93b28f-7f79-4092-a0a5-bc7c66e731a9) - -## Browser compatibility alerts - -This component framework requires the following browsers or newer versions at a minimum: - -- Chromium/Edge 91+ -- Firefox 100+ -- Safari 9.1+ +## List of functions/features: -To fully render all component effects, the following browser versions or newer are required: +- Communicate with any client that implements the AMLL WS Protocol, synchronize the progress of the playback information, and get the corresponding lyrics for playback display +- Support reading local audio files for playback, or loading local lyrics files +- Support loading various lyric formats +- High performance – no software issues that affect the display of lyrics +- Expected support for playback state transfer protocols:[SMTC (Windows)](https://learn.microsoft.com/en-us/uwp/api/windows.media.systemmediatransportcontrols?view=winrt-26100) / [MPRIS (Linux/XDG)](https://www.freedesktop.org/wiki/Specifications/mpris-spec/) / [MPNowPlayingInfoCenter (macOS)](https://developer.apple.com/documentation/mediaplayer/mpnowplayinginfocenter) -- Chromium 120+ -- Firefox 100+ -- Safari 15.4+ +## Install and use -Reference Links: +Since the player is still compatible, the development build can only be downloaded through [Github Action](https://github.com/amll-dev/amll-player/actions/workflows/build-player.yaml), and the official version will be released in the future. -- [https://caniuse.com/mdn-css_properties_mask-image](https://caniuse.com/mdn-css_properties_mask-image) -- [https://caniuse.com/mdn-css_properties_mix-blend-mode_plus-lighter](https://caniuse.com/mdn-css_properties_mix-blend-mode_plus-lighter) +## Why is there this? -## Performance configuration reference +The lyrics player is equivalent to software like external subtitles, and the lyrics are played in an environment independent of the plug-in environment. -Performance benchmarks have shown that mainstream CPU processors from the last five years can run the lyric component at 30FPS. However, if you need smooth 60FPS operation, ensure your CPU frequency is at least 3.0GHz or higher. For 144FPS or above, a CPU frequency of at least 4.2GHz is recommended. +After the author's performance test, it is found that embedding it in the form of a plug-in on the playback page will cause frame drops and uncertain stuttering due to the browser framework problems of the plug-in running environment. -GPU performance capable of running at full 60 fps at the expected sizes under the following conditions: +Therefore, the author decided to separate the playback page into a separate desktop program to improve the playback performance and effect, while the original plug-in was responsible for transmitting the playback information and status to the lyric player. -- `1080p (1920x1080)`: NVIDIA GTX 10 series and above -- `2160p (3840x2160)`: NVIDIA RTX 2070 and above +So if you also have a little stuttering, you can try using this lyric player, and the performance should be improved. -## Development/build/packaging process - -### Prerequisites - -- [Node.js](https://nodejs.org/) -- [pnpm](https://pnpm.io/) -- [Rust toolchain](https://rustup.rs/) -- [wasm-pack](https://rustwasm.github.io/wasm-pack/) - -For building the standalone **AMLL Player** desktop application, additionally install: - -- [Tauri prerequisites](https://tauri.app/start/prerequisites/) for your platform - -### Building the component libraries - -Clone this repository, then run the following commands in the project root: - -```bash -# Install dependencies -pnpm install - -# Production build (all library packages) -pnpm build:libs -``` - -### Building a single package - -```bash -# Example: build only @applemusic-like-lyrics/core -pnpm nx run @applemusic-like-lyrics/core:build - -# Example: development build of @applemusic-like-lyrics/lyric -pnpm nx run @applemusic-like-lyrics/lyric:build:dev -``` ### Building the AMLL Player desktop application @@ -108,7 +39,7 @@ pnpm tauri build # Production build pnpm tauri dev # Development mode ``` -## Acknowledgements +### Acknowledgements - [woshizja/sound-processor](https://github.com/woshizja/sound-processor) - [FFmpeg](http://ffmpeg.org/) diff --git a/packages/player/README-CN.md b/packages/player/README-CN.md deleted file mode 100644 index fc99ca3f..00000000 --- a/packages/player/README-CN.md +++ /dev/null @@ -1,27 +0,0 @@ -# AMLL Player - -一个通过 本地音乐文件/WebSocket Server 获取音频播放信息的独立歌词页面播放器。 - -功能/特性列表: - -- 与任何实现 AMLL WS Protocol 的客户端进行通信,同步播放信息进度,并获取对应的歌词以进行播放展示 -- 支持读取本地音频文件播放,或加载本地歌词文件 -- 支持加载各种歌词格式 -- 高性能 —— 不会因为某些软件自身问题导致歌词展示效果受到影响 -- 预计支持播放状态传输协议:[SMTC (Windows)](https://learn.microsoft.com/en-us/uwp/api/windows.media.systemmediatransportcontrols?view=winrt-26100) / [MPRIS (Linux/XDG)](https://www.freedesktop.org/wiki/Specifications/mpris-spec/) / [MPNowPlayingInfoCenter (macOS)](https://developer.apple.com/documentation/mediaplayer/mpnowplayinginfocenter) - -## 安装使用 - -由于播放器还在兼容状态,所以仅可通过 [Github Action](https://github.com/amll-dev/applemusic-like-lyrics/actions/workflows/build-player.yaml) 下载开发构建,日后会推出正式版。 - -## 为什么会有这个? - -歌词播放器相当于外挂字幕一样的软件,在独立于插件环境以外的环境播放歌词。 - -经过作者的性能测试,发现以插件形式嵌入到播放页面会因为插件运行环境自身浏览器框架问题导致掉帧和不定卡顿的问题。 - -故作者决定将播放页面分离到一个独立的桌面程序进行以提高播放性能和效果,而原插件则负责将播放的信息和状态传递给歌词播放器。 - -因此如果你也有少许卡顿现象,可以尝试使用这个歌词播放器,性能应该可以有所改善。 - -~~毕竟真的不是我插件优化差啊()~~ diff --git a/packages/player/README.md b/packages/player/README.md deleted file mode 100644 index a9a11906..00000000 --- a/packages/player/README.md +++ /dev/null @@ -1,29 +0,0 @@ -# AMLL Player - -English / [简体中文](/packages/player/README-CN.md) - -An independent lyrics page player that obtains audio playback information through local music files/WebSocket Server. - -List of functions/features: - -- Communicate with any client that implements the AMLL WS Protocol, synchronize the progress of the playback information, and get the corresponding lyrics for playback display -- Support reading local audio files for playback, or loading local lyrics files -- Support loading various lyric formats -- High performance – no software issues that affect the display of lyrics -- Expected support for playback state transfer protocols:[SMTC (Windows)](https://learn.microsoft.com/en-us/uwp/api/windows.media.systemmediatransportcontrols?view=winrt-26100) / [MPRIS (Linux/XDG)](https://www.freedesktop.org/wiki/Specifications/mpris-spec/) / [MPNowPlayingInfoCenter (macOS)](https://developer.apple.com/documentation/mediaplayer/mpnowplayinginfocenter) - -## Install and use - -Since the player is still compatible, the development build can only be downloaded through [Github Action](https://github.com/amll-dev/applemusic-like-lyrics/actions/workflows/build-player.yaml), and the official version will be released in the future. - -## Why is there this? - -The lyrics player is equivalent to software like external subtitles, and the lyrics are played in an environment independent of the plug-in environment. - -After the author's performance test, it is found that embedding it in the form of a plug-in on the playback page will cause frame drops and uncertain stuttering due to the browser framework problems of the plug-in running environment. - -Therefore, the author decided to separate the playback page into a separate desktop program to improve the playback performance and effect, while the original plug-in was responsible for transmitting the playback information and status to the lyric player. - -So if you also have a little stuttering, you can try using this lyric player, and the performance should be improved. - -~~After all, it's really not my plugin optimization poor ()~~