Melody Canvas

April 7, 2025 ยท View on GitHub

English | ็ฎ€ไฝ“ไธญๆ–‡

๐ŸŒท Preview

Live Demo

๐ŸŒŽ 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