https://github.com/hoangtran0410/visualyze-design-your-own-

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 ...
https://github.com/hoangtran0410/visualyze-design-your-own-

custom datgui design music-visualizer p5js relax soundcloud-api visualization zing-mp3

Last synced: about 21 hours ago
JSON representation

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 ...

• Host: GitHub
• URL: https://github.com/hoangtran0410/visualyze-design-your-own-
• Owner: HoangTran0410
• Created: 2018-05-01T13:44:13.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-04-09T10:52:47.000Z (6 months ago)
• Last Synced: 2024-09-26T12:01:21.843Z (about 22 hours ago)
• Topics: custom, datgui, design, music-visualizer, p5js, relax, soundcloud-api, visualization, zing-mp3
• Language: JavaScript
• Homepage: https://hoangtran0410.github.io/Visualyze-design-your-own-/
• Size: 56.7 MB
• Stars: 11
• Watchers: 1
• Forks: 10
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](Screenshot/Screenshot.png)

* Theme 2

![theme 2](Screenshot/Screenshot2.png)

* Design mode

![design](Screenshot/Screenshot_design.png)

# *HOPE YOU LIKE THIS*