Giter VIP home page Giter VIP logo

steve-xmh / applemusic-like-lyrics Goto Github PK

View Code? Open in Web Editor NEW
574.0 5.0 45.0 349.17 MB

A lyric player component library aims to look similar to iPad version of Apple Music. Also with DOM, React and Vue bindings. 一个基于 Web 技术制作的类 Apple Music 歌词显示组件库,同时支持 DOM 原生、React 和 Vue 绑定。

License: GNU General Public License v3.0

JavaScript 0.26% TypeScript 67.89% HTML 0.53% Sass 6.04% Rust 14.55% C 2.10% CSS 0.45% Vue 1.18% GLSL 0.77% MDX 6.22%
music music-player apple-music lyric javascript react typescript vue

applemusic-like-lyrics's Introduction

Apple Music-like Lyrics

一个基于 Web 技术制作的类 Apple Music 歌词显示组件库,同时支持 DOM 原生React Vue 绑定,与各种平台兼容的外置播放器也仍在制作当中。

这是你能在前端系里能见到的最像 iPad Apple Music 的播放页面了。

尽管这个项目的目标并非完全模仿,但是会更好地打磨一些细节,以优于现阶段最好的歌词播放器。

—— AMLL 生态作品 ——

AMLL TTML DB 逐词歌词仓库 / AMLL TTML Tool 逐词歌词编辑器

AMLL 生态及源码结构

主要模块

  • AMLL-Core:AMLL 核心组件库,以 DOM 原生方式编写,提供歌词显示组件和动态流体背景组件
  • AMLL-React:AMLL React 绑定,提供 React 组件形式的歌词显示组件和动态流体背景组件
  • AMLL-Vue:AMLL Vue 绑定,提供 Vue 组件形式的歌词显示组件和动态流体背景组件
  • AMLL-Lyric: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 歌词组件展示图,歌曲: Jake Miller, HOYO-MiX - WHITE NIGHT (不眠之夜) ,TTML 歌词贡献者: @Xionghaizi001

歌曲: Jake Miller, HOYO-MiX - WHITE NIGHT (不眠之夜)
TTML 歌词贡献者: @Xionghaizi001

AMLL 歌词组件展示图,歌曲: Maroon 5 - Sugar ,TTML 歌词贡献者: @Y-CIAO

歌曲: Maroon 5 - Sugar
TTML 歌词贡献者: @Y-CIAO

AMLL 歌词组件展示图,歌曲: Taylor Swift, Brendon Urie - ME! ,TTML 歌词贡献者: @Xionghaizi001

歌曲: Taylor Swift, Brendon Urie - ME!
TTML 歌词贡献者: @Xionghaizi001

浏览器兼容性提醒

本组件框架最低要求使用以下浏览器或更新版本:

  • Chromuim/Edge 91+
  • Firefox 100+
  • Safari 9.1+

完整呈现组件所有效果需要使用以下浏览器或更新版本:

  • Chromuim 120+
  • Firefox 100+
  • Safari 15.4+

参考链接:

性能配置参考

经过性能基准测试,五年内的主流 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/*" # 发行构建

鸣谢

特别鸣谢

感谢 JetBrains 系列开发工具为 AMLL 项目提供的大力支持

applemusic-like-lyrics's People

Contributors

eplorr avatar flysoftbeta avatar microcber avatar nevodev avatar steamfinder avatar steve-xmh avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.