https://github.com/leon-kfd/g-music-visualizer

Awesome music visualizer mode
https://github.com/leon-kfd/g-music-visualizer

d3 g music-visualizer react

Last synced: about 1 year ago
JSON representation

Awesome music visualizer mode

• Host: GitHub
• URL: https://github.com/leon-kfd/g-music-visualizer
• Owner: leon-kfd
• Created: 2021-06-18T09:56:47.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-08-19T07:13:09.000Z (almost 2 years ago)
• Last Synced: 2024-08-20T08:05:43.787Z (almost 2 years ago)
• Topics: d3, g, music-visualizer, react
• Language: TypeScript
• Homepage: https://leon-kfd.github.io/g-music-visualizer
• Size: 851 KB
• Stars: 39
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
## G-Music-Visualizer

音频可视化方案

选择阿里`AntV`出品的[G](https://g.antv.vision/)作为底层渲染库

Online Demo: [Click Here](https://leon-kfd.github.io/g-music-visualizer)

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

## Something

+ 项目基于`vite` + `react` + `ts`搭建

+ 基于`AudioContext`的`decodeAudioData`API读取音频数据

+ 当前粒子效果Example（`s-particle`）导致掉帧严重，把粒子数降低了很多，正寻找优化方案

+ 使用原生Element.animate()实现了逐字歌词，但因获取到的歌词是逐行歌词，逐字效果为线性动画模拟

## Run the project

+ `yarn`

+ `npm run dev`

## License

`MIT` © [leon-kfd](https://github.com/leon-kfd) 2023