蘋果音樂喜歡歌詞

English / 簡體中文

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 生態及原始碼結構

主要模組

• ：AMLL 核心元件庫，以DOM 原生方式編寫，提供歌詞顯示元件和動態流體背景元件

• ：AMLL React 綁定，提供React 元件形式的歌詞顯示元件和動態流體背景元件

• ：AMLL Vue 綁定，提供Vue 元件形式的歌詞顯示元件和動態流體背景元件

• ：AMLL 歌詞解析模組，提供對LyRiC, YRC, QRC, Lyricify Syllable 各種歌詞格式的解析和序列化支持

外部工具

• AMLL Player：AMLL 外接播放器，提供獨立的外接歌詞播放器，並透過獨特的WebSocket 協定與AMLL 任意實現了協定的程式進行通訊展示歌詞

• AMLL TTML Tool： AMLL TTML 編輯器，提供對TTML 格式歌詞的編輯支持，並使用AMLL Core 進行即時預覽

• AMLL TTML Database： AMLL TTML 資料庫，提供TTML 歌詞儲存倉庫，以讓各類歌詞播放器可以使用由社群製作的TTML 逐字歌詞

AMLL Player Preview Gallery

瀏覽器相容性提醒

本元件框架最低要求使用下列瀏覽器或更新版本：

• Chromuim/Edge 91+

• Firefox 100+

• Safari 9.1+

完整呈現元件所有效果需要使用下列瀏覽器或更新版本：

• Chromuim 120+

• Firefox 100+

• Safari 15.4+

參考連結：

• https://caniuse.com/mdn-css_properties_mask-image

• https://caniuse.com/mdn-css_properties_mix-blend-mode_plus-lighter

性能配置參考

經過性能基準測試，五年內的主流CPU 處理器均可以以30FPS 正常帶動歌詞組件，但如果需要60FPS 流暢運行，請確保CPU 頻率至少為3.0Ghz 或以上。如果需要144FPS 以上流暢運行，請確保CPU 頻率至少為4.2Ghz 或以上。

GPU 效能在以下狀況下能夠以預期尺寸下滿60 幀運作：

• 1080p (1920x1080) : NVIDIA GTX 10 系列以上

• 2160p (3840x2160) : NVIDIA RTX 2070 以上

程式碼貢獻

由於作者精力有限，已經無力處理大家使用過程中產生的問題，所以關閉了Issues 板塊，但是歡迎任何對程式碼有正面貢獻的Pull Request！

開發/建置/打包流程

安裝好yarn , rustc , wasm-pack ，克隆本倉庫到任意資料夾後在終端輸入以下指令即可建構：

 yarn
yarn lerna run build:dev --scope "@applemusic-like-lyrics/*" # 開發構建yarn lerna run build --scope "@applemusic-like-lyrics/*" # 發行構建

鳴謝

• woshizja/sound-processor

• 還有很多被AMLL 使用的框架和函式庫，非常感謝！

特別鳴謝

感謝JetBrains 系列開發工具為AMLL 專案提供的大力支持