Skip to content

A VanillaJS application created using the p5js library, which offers audio visualization for .mp3 files.

Notifications You must be signed in to change notification settings

skald1311/Music-Visualizer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

LinkedIn


Logo

Music Visualizer

An audio visualizer app made with p5js
LIVE DEMO

Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Live demo
  3. Contributing
  4. License
  5. Contact

About The Project

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.

image

(back to top)

Built With

  • Javascript
  • HTML5
  • CSS

(back to top)

Live Demo

LIVE DEMO AVAILABLE HERE

Contributing

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!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

(back to top)

License

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.

(back to top)

Contact

Duong Hoang - LinkedIn

Project Link: https://github.com/skald1311/Music-Visualizer

(back to top)

About

A VanillaJS application created using the p5js library, which offers audio visualization for .mp3 files.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published