Visualyze-design-your-own-

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

Visualyze-design-your-own-

★ 11 Open GitHub ↗

Trang web mô phỏng (visualize) âm nhạc, có thể tự kéo thả, điều chỉnh các hiệu ứng, dùng nhạc online hoặc offline (kéo từ pc vào) và nhiều thứ hay ho khác ...

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Visualyze Music

Donate? Muốn hỗ trợ mình 1 ly cafe <3 [Donate here](https://github.com/HoangTran0410/HoangTran0410/blob/main/DONATE.md)

Using P5js and dat.GUI

* [Link Play](https://hoangtran0410.github.io/Visualyze-design-your-own-/)
* [Old Version](https://hoangtran0410.github.io/VisualyzeTest/)

* [P5js Library](https://p5js.org/) and [Toturial from Daniel Shiffman](https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw)
* [dat.GUI toturial](https://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage)

[Tool to get zingmp3 song ID (outdated)](./tools/)

## 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 1](https://raw.githubusercontent.com/HoangTran0410/Visualyze-design-your-own-/master/Screenshot/Screenshot.png)
* Theme 2
![theme 2](https://raw.githubusercontent.com/HoangTran0410/Visualyze-design-your-own-/master/Screenshot/Screenshot2.png)
* Design mode
![design](https://raw.githubusercontent.com/HoangTran0410/Visualyze-design-your-own-/master/Screenshot/Screenshot_design.png)

# *HOPE YOU LIKE THIS*

Visualyze-design-your-own-

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README