thanhlongzzz/Visualyze

player mp3

Visualyze Music

Using P5js and dat.GUI

• Link Play

• P5js Library and Toturial from Daniel Shiffman

• dat.GUI toturial

How to Play

Drag

Drag files into visualyze web :

• AUDIO files to add songs (view songs in tab Setting -> Audio -> List Music)
• IMAGE file to change background (view and choose background in Setting -> Background)
• LYRIC file (.lrc) to load lyric (you can dowload lyric file from google, all default songs already have lyrics)
• THEME file (.json) to load theme (already have some theme in Setting -> Themes)

Design Mode

You can turn on Design mode(in tab Design or press S) to Design yourselft themes While you turn on, all objects will have it own boxcontain

• Hold and drag Center circle of boxcontain to MOVE object
• Hold and drag Bottom Right Side circle of boxcontain to CHANGE SIZE
• Press X RED rectangle to DELETE object
• Add objects from tab Design (Amplitude, FFT, Buttons, Title, Text Box, Lyric)

-> each object is able to edit -> press SAVE THEME to save your theme

Setting

• Loop Song : replay forever the current song
• Clear List Music : delete all songs in list -> then you can drag into web your own songs and play your own playlist
• b.g AutoChange : auto change the background with time step
• b.g Animation : background moving with beat bass

Screenshot

• Theme 1
• Theme 2
• Design mode

HOPE YOU LIKE THIS