English / 简体中文
A lyric player component library aims to look similar to iPad version of Apple Music. Also with DOM, React and Vue bindings. Also there's a local player based on it!
This's maybe the most like iPad Apple Music style lyric page you've seen in frontend.
Although the goal of this project is not to imitate it completely, it will polish some details better to be better than currently the best lyric players.
—— AMLL Series Projects ——
AMLL TTML DB - TTML Syllable Lyric Database / AMLL TTML Tool - TTML Syllable Lyric Editor
-
:AMLL Core Component Library,以 DOM Written natively,Provides a lyric display component and a dynamic fluid background component
-
:AMLL React bind**,Provision React Lyrics in the form of components display components and dynamic fluid background components
-
:AMLL Vue bind,Provision Vue Lyrics in the form of components display components and dynamic fluid background components
-
:AMLL The lyrics parsing module provides parsing and serialization support for various lyric formats of LyRiC, YRC, QRC, Lyricify Syllable
-
AMLL Player:AMLL External Player provides an independent external lyrics player, and communicates with AMLL's programs that implement any protocol through the unique WebSocket protocol to display lyrics
-
AMLL TTML Tool: AMLL TTML Editor with editing support for lyrics in TTML format and real-time preview using AMLL Core
=======
:AMLL Core Component Library,以 DOM Written natively,Provides a lyric display component and a dynamic fluid background component
:AMLL React bind**,Provision React Lyrics in the form of components display components and dynamic fluid background components
:AMLL Vue bind,Provision Vue Lyrics in the form of components display components and dynamic fluid background components
:AMLL The lyrics parsing module provides parsing and serialization support for various lyric formats of LyRiC, YRC, QRC, Lyricify Syllable
- AMLL Player:AMLL External Player provides an independent external lyrics player, and communicates with AMLL's programs that implement any protocol through the unique WebSocket protocol to display lyrics
- AMLL TTML Tool: AMLL TTML Editor with editing support for lyrics in TTML format and real-time preview using AMLL Core
- AMLL TTML Database: AMLL TTML database, which provides a TTML lyrics repository so that all kinds of lyric players can use community-made TTML word-for-word lyrics
This component framework requires the following browsers or newer versions at a minimum:
- Chromuim/Edge 91+
- Firefox 100+
- Safari 9.1+
The following browser or newer version is required to render all effects of the component:
- Chromuim 120+
- Firefox 100+
- Safari 15.4+
Reference Links:
- https://caniuse.com/mdn-css_properties_mask-image
- https://caniuse.com/mdn-css_properties_mix-blend-mode_plus-lighter
PERFORMANCE BENCHMARKS HAVE SHOWN THAT ALL MAJOR CPU PROCESSORS WITHIN FIVE YEARS CAN DRIVE THE LYRICS COMPONENT AT 30FPS, BUT IF YOU WANT TO RUN SMOOTHLY AT 60FPS, MAKE SURE THE CPU FREQUENCY IS AT LEAST 3.0Ghz OR ABOVE. If you need smooth operation above 144FPS, make sure the CPU frequency is at least 4.2Ghz or above.
GPU performance is capable of running at full 60 fps at the expected size under the following conditions:
1080p (1920x1080)
: NVIDIA GTX 10 series and above2160p (3840x2160)
: NVIDIA RTX 2070 and above
Due to the author's limited energy, he is no longer able to deal with the problems that arise during the use of the code, so the Issues section is closed, but any pull requests that contribute positively to the code are welcome!
Install it yarn
, rustc
, wasm-pack
,Clone the repository into any folder and enter the following command in the terminal to build it::
yarn
yarn lerna run build:dev --scope "@applemusic-like-lyrics/*" # 开发构建
yarn lerna run build --scope "@applemusic-like-lyrics/*" # 发行构建
- woshizja/sound-processor
- There are also many frameworks and libraries that are used by AMLL, thank you very much!