/g-music-visualizer

Awesome music visualizer mode

Primary LanguageTypeScript

G-Music-Visualizer

音频可视化方案

选择阿里AntV出品的G作为底层渲染库

Online Demo: Click Here

Example示例效果灵感来源于网易云音乐,需要选择一个本地音频点击播放才会激活音频特效

Something

  • 项目基于vite + react + ts搭建
  • 基于AudioContextdecodeAudioDataAPI读取音频数据
  • 当前粒子效果Example(s-particle)导致掉帧严重,把粒子数降低了很多,正寻找优化方案
  • 使用原生Element.animate()实现了逐字歌词,但因获取到的歌词是逐行歌词,逐字效果为线性动画模拟

Run the project

  • yarn
  • npm run dev

License

MIT © leon-kfd 2023