Table of Contents
Music Visualizer is a VanillaJS application created using p5js library, which provides users with visual input while they are listening to their music/audio. P5js provided FFT (Fast Fourier Transform), which were used to process and draw the waveform of the audio. Not only do the application comes with the waveform visualization, it also includes a background and particles that are responsive to the amplitude of a given sound.
How to use: Users have two options - load the audio themselves or load the predownloaded audio.
-
Loading the predownloaded songs: In the top right corner, choose a song that you would like to demo. Click Load. A progress bar will appear with the loading progress. It will disappear after the song is loaded successfully. Click the play/pause button.
-
Loading the audio yourself: The application only takes in .mp3 files. Download an .mp3 file. Drag and drop that .mp3 file into the drop zone. Click play/pause. Usually, you will have to wait a little for the file to load. So if it doesn't work the first time you click play, click again after a few seconds.
LIVE DEMO AVAILABLE HERE
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Distributed under the MIT License.
Users uploading mp3s to the site should have legal permission of the files in doing so.
Credit to Alan Walker, Phil Smooth, Kordhell, Sia, and Zedd for their songs in the predownloaded section.
Duong Hoang - LinkedIn
Project Link: https://github.com/skald1311/Music-Visualizer