Skip to content

Joker-pyc/Web-Music-Visualizer-

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Web-Music-Visualizer-

A music Visualizer for web

The Particle Effect Music Visualizer is a web-based application that provides an immersive and dynamic visualization of music through mesmerizing particle animations. This visualizer allows users to select their favorite music files and experience an interactive display of particles that move and respond to the beats and rhythms of the music.

Usage Instructions:

  1. Getting Started:

    • Clone or download the project to your local machine.
    • Open the index.html file in your web browser.
  2. Select Music:

    • Click on the "Choose Music" button or label to open your file explorer.
    • Select an audio file (e.g., MP3, WAV) from your local machine.
    • The visualizer will automatically start playing the selected music and display the particle animation.
  3. Play/Pause Music:

    • Once the music is loaded, you can control playback by clicking or tapping the "Play/Pause" button.
    • Clicking the button will toggle between playing and pausing the music.
  4. Fullscreen Mode:

    • To enhance the visual experience, you can toggle fullscreen mode by clicking or tapping the "Fullscreen" button.
    • This will expand the visualizer to fill your entire screen.
  5. Particle Animation:

    • The visualizer generates an animation of colorful particles that move in a circular pattern around the center of the screen.
    • The particles' movement and colors are synchronized with the music's beats, creating a dynamic and engaging display.
  6. Beat Detection:

    • The visualizer employs beat detection to trigger special particle effects when a beat occurs in the music.
    • The beats are visualized as additional particles that momentarily appear on the screen.
  7. Now Playing Label:

    • After selecting a music file, a "Now Playing" label will briefly appear in the top right corner, showing the name of the currently playing music.
  8. Responsive Design:

    • The visualizer is designed to adapt to different screen sizes and orientations, providing a seamless experience on both desktop and mobile devices.

Important Notes:

  • For the best experience, use the visualizer with a device that has decent processing power and a modern web browser.
  • The visualizer relies on the Web Audio API, which may not be supported in some older browsers.

License:

  • This project is licensed under the MIT License. Feel free to use, modify, and distribute the code for personal or commercial purposes. However, we assume no responsibility for any damages or liabilities arising from the use of this project.

Acknowledgments:

  • We extend our gratitude to the creators of the Web Audio API and the Canvas API, which make this visualizer possible.
  • Special thanks to the open-source community for providing valuable resources and libraries used in this project.

Enjoy the mesmerizing visual experience of the Particle Effect Music Visualizer! Let the music take you on a colorful journey with captivating particle animations! 🎵🌌

About

A music Visualizer for web

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published