Melody Canvas

English | 简体中文

🌷 Preview

🌎 How to Use

Demo.mp4

(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

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