applemusic like lyrics
3.1.0
English / Simplified Chinese
Warning
English readme is still under construction!
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, written in DOM native way, providing lyrics display components and dynamic fluid background components
: AMLL React binding, providing lyrics display components and dynamic fluid background components in the form of React components
: AMLL Vue binding, providing lyrics display components and dynamic fluid background components in the form of Vue components
: AMLL lyrics parsing module, providing parsing and serialization support for LyRiC, YRC, QRC, Lyricify Syllable various lyric formats
AMLL Player: AMLL external player provides an independent external lyrics player and communicates with any AMLL program that implements the protocol through the unique WebSocket protocol to display lyrics.
AMLL TTML Tool: AMLL TTML editor provides editing support for lyrics in TTML format and uses AMLL Core for real-time preview
AMLL TTML Database: AMLL TTML database provides a TTML lyrics storage warehouse so that various lyrics players can use TTML word-by-word lyrics produced by the community.
The minimum requirement for this component framework is to use the following browsers or newer versions:
Chromium/Edge 91+
Firefox 100+
Safari 9.1+
To fully render all effects of the component, you need to use the following browsers or newer versions:
Chromium 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
After performance benchmark testing, mainstream CPU processors within five years can drive the lyrics component normally at 30FPS. However, if you need 60FPS to run smoothly, please ensure that the CPU frequency is at least 3.0Ghz or above. If you need smooth operation above 144FPS, please make sure the CPU frequency is at least 4.2Ghz or above.
GPU performance is capable of running at full 60 frames at expected dimensions under the following conditions:
1080p (1920x1080) : NVIDIA GTX 10 Series and above
2160p (3840x2160) : NVIDIA RTX 2070 and above
Due to the author's limited energy, he is no longer able to deal with the problems caused by everyone's use, so the Issues section has been closed, but any Pull Request that has actively contributed to the code is welcome!
After installing yarn , rustc , and wasm-pack , clone the repository to any folder and enter the following command in the terminal to build:
yarn yarn lerna run build:dev --scope "@applemusic-like-lyrics/*" # Development build yarn lerna run build --scope "@applemusic-like-lyrics/*" # Release build
woshizja/sound-processor
There are also many frameworks and libraries used by AMLL, thank you very much!
Thanks to the JetBrains series of development tools for providing strong support to the AMLL project
