RylanBot/melody-canvas：🎼 音频可视化编辑器「音频可视化画布」

项目介绍

RylanBot/melody-canvas 是一个托管在 GitHub 上的开源项目，主要使用 TypeScript 编写，采用 MIT License 许可证，目前获得 251 个 Star、17 次 Fork。

仓库全名: RylanBot/melody-canvas

README 摘要

Melody Canvas English | 简体中文 🌷 Preview 🌎 How to Use https://github.com/user-attachments/assets/5fa03e28-d6c8-4c0c-a74f-3bdb902be4b5 (You can skip to 00:25 in the video to see the final creation) 🔥 Feature 💕 Audio Visualization Built on the Web Audio API with self-designed audio analysis algorithms Support adding various types of elements with flexible options 💕 Canvas Editing Powered by the FabricJS library for…

完整内容见 GitHub 原始 README 或本页。

常见问题

melody-canvas 用什么语言开发？

主要使用 TypeScript 编写，采用 MIT License 许可证，目前有 251 个 Star。

melody-canvas 可以免费商用吗？

如何获取 melody-canvas 的源码？

可以直接克隆仓库：git clone https://github.com/RylanBot/melody-canvas.git；安装与运行步骤见仓库 README。

melody-canvas 最近还在维护吗？

仓库最近一次更新为 2月3日，当前有 1 个未关闭 Issue；Star 数为 251，可作为社区活跃度的参考。

关于

GitHub 原始描述（英文）

🎼 Audio visualization editor「音频可视化画布」

fyp-project music-visualizer

MIT License
251 Stars
17 Forks
251 Watching

描述取自 GitHub 官方 API，保持仓库作者书写的原文。

简要分析

热度分

536

价值分

180

活跃状态

活跃

GitHub

语言占比

CSS

HTML

JavaScript

TypeScript

贡献者

RylanBot

Melody Canvas

English | 简体中文

🌷 Preview

🌎 How to Use

https://github.com/user-attachments/assets/5fa03e28-d6c8-4c0c-a74f-3bdb902be4b5

(You can skip to 00:25 in the video to see the final creation)

🔥 Feature

💕 Audio Visualization

Built on the Web Audio API with self-designed audio analysis algorithms
Support adding various types of elements with flexible options

💕 Canvas Editing

Powered by the FabricJS library for a draggable canvas
Support adding images and text for artistic compositions

💕 Video Export

Powered by the WebAV, a library built on the WebCodecs API, to process videos directly in the browser
Support adjusting other content while a video is rendering

🧙🏻 Development

node version pnpm version

If you are familiar with the Web frontend technologies and are interested in source code, you can run this program using the following commands:

npm install # pnpm install
npm run dev

I recommend you read reading the article “Audio Visualization: Sampling, Frequency and Fourier Transform” first. Then, explore the source code of FrequencyAnalyzer in this project to better understand the core logic behind it.

If you’d like to add more visualization effects, you can refer to the source code in visualizers/builder, and follow these steps:

Create a new folder called YourEffect under this path
Add two files index.ts and Svg.tsx
Implement your custom feature

暂无评论

melody-canvas