AillForSounds Visualizer

01 / O projekcie

O projekcie

Visualizer przekłada połączenie muzyki i obrazu w AillForSounds na praktyczne narzędzie. Wgraj audio, wybierz tło i logo, zobacz animację reagującą na dźwięk i nagraj rezultat audiowizualny.

02 / Pomysł

Pomysł

Prezentacja audiowizualna potrzebuje dźwięku, tożsamości wizualnej i możliwości zapisania rezultatu. Projekt łączy te kroki w jednym procesie w przeglądarce, pozostawiając renderowanie i analizę audio wewnątrz dedykowanej aplikacji.

03 / Co stworzyłem

Co stworzyłem

• Aplikację Vue z wgrywaniem plików audio, tła i logo.
• Analizę Web Audio sterującą animacją Canvas 2D przez requestAnimationFrame.
• Proces nagrywania łączący strumień wideo z canvasa i audio przez MediaRecorder.

04 / Najważniejsze elementy

Najważniejsze elementy

• Wgrywanie własnego audio i obrazów.
• Odtwarzanie, pauzę i podgląd wizualizacji reagującej na dźwięk.
• Własne tło i logo.
• Nagrywanie i pobieranie wideo WebM w przeglądarce obsługującej wymagane API multimedialne.

05 / Ekosystem projektu

Ekosystem projektu