{"id":29111145,"url":"https://github.com/leon-kfd/g-music-visualizer","last_synced_at":"2025-06-29T09:06:58.563Z","repository":{"id":112395433,"uuid":"378106990","full_name":"leon-kfd/g-music-visualizer","owner":"leon-kfd","description":"Awesome music visualizer mode","archived":false,"fork":false,"pushed_at":"2024-08-19T07:13:09.000Z","size":871,"stargazers_count":39,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-08-20T08:05:43.787Z","etag":null,"topics":["d3","g","music-visualizer","react"],"latest_commit_sha":null,"homepage":"https://leon-kfd.github.io/g-music-visualizer","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leon-kfd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-18T09:56:47.000Z","updated_at":"2024-08-19T07:12:28.000Z","dependencies_parsed_at":"2023-10-11T05:49:42.179Z","dependency_job_id":"5a3e6aac-467a-4dee-ae30-d3f95c855f42","html_url":"https://github.com/leon-kfd/g-music-visualizer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/leon-kfd/g-music-visualizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leon-kfd%2Fg-music-visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leon-kfd%2Fg-music-visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leon-kfd%2Fg-music-visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leon-kfd%2Fg-music-visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leon-kfd","download_url":"https://codeload.github.com/leon-kfd/g-music-visualizer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leon-kfd%2Fg-music-visualizer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262566867,"owners_count":23329692,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["d3","g","music-visualizer","react"],"created_at":"2025-06-29T09:06:57.143Z","updated_at":"2025-06-29T09:06:58.549Z","avatar_url":"https://github.com/leon-kfd.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## G-Music-Visualizer\r\n\r\n音频可视化方案\r\n\r\n选择阿里`AntV`出品的[G](https://g.antv.vision/)作为底层渲染库\r\n\r\nOnline Demo: [Click Here](https://leon-kfd.github.io/g-music-visualizer)\r\n\r\n\u003e Example示例效果灵感来源于`网易云音乐`，需要选择一个本地音频点击播放才会激活音频特效\r\n\r\n## Something\r\n\r\n+ 项目基于`vite` + `react` + `ts`搭建\r\n+ 基于`AudioContext`的`decodeAudioData`API读取音频数据\r\n+ 当前粒子效果Example（`s-particle`）导致掉帧严重，把粒子数降低了很多，正寻找优化方案\r\n+ 使用原生Element.animate()实现了逐字歌词，但因获取到的歌词是逐行歌词，逐字效果为线性动画模拟\r\n\r\n## Run the project\r\n\r\n+ `yarn`\r\n+ `npm run dev`\r\n\r\n## License\r\n\r\n`MIT` © [leon-kfd](https://github.com/leon-kfd) 2023","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleon-kfd%2Fg-music-visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleon-kfd%2Fg-music-visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleon-kfd%2Fg-music-visualizer/lists"}