AillForSounds Visualizer

01 / The project

The project

The visualizer gives the AillForSounds connection between music and imagery a practical tool. Load audio, choose a background and logo, preview sound-reactive animation and record the audiovisual result.

02 / The idea

The idea

An audiovisual presentation needs sound, visual identity and a way to capture the result. This project brings those steps into one browser workflow while keeping the rendering and audio analysis within a dedicated application.

03 / What I built

What I built

• A Vue application with audio, background and logo file uploads.
• Web Audio analysis feeding a Canvas 2D animation through requestAnimationFrame.
• A recording workflow combining the canvas video stream and audio with MediaRecorder.

04 / Key elements

Key elements

• Upload your own audio and images.
• Play, pause and preview a sound-reactive visualization.
• Use a custom background and logo.
• Record and download WebM video in a browser supporting the required media APIs.

05 / Project ecosystem

Project ecosystem