Code trang web mô phỏng (visualize) âm nhạc, có thể tự kéo thả, điều chỉnh các hiệu ứng bằng JavaScript

Code trang web mô phỏng (visualize) âm nhạc, có thể tự kéo thả, điều chỉnh các hiệu ứng bằng JavaScript

Using P5js and dat.GUI

• 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