Advanced Music Visualizer

Advanced Music Visualizer

An advanced, interactive 3D audio visualizer using Three.js and Web Audio API. Transform your music into mesmerizing visual spectacles with a variety of shapes and color schemes. A single html file, just run in your browser.

Live Demo

You can view and interact with the visualizer on Advanced Music Visualizer.

Features

• Visualize audio with a variety of shapes and color schemes.
• Supports custom color presets.
• Intensity, particle count, and rotation speed controls.
• Responsive design with controls optimized for both large and small screens.

How to Use

1. Upload an Audio File
   • Click on “Choose Audio File” and select an audio file from your device.
2. Select a Shape
   • Use the dropdown menu to choose from various shapes like Sphere, Cube, Torus, Spiral, and many more.
3. Control the Visuals
   • Intensity: Adjust the intensity of the visualization.
   • Particles: Adjust the number of particles in the visualization.
   • Rotation: Control the rotation speed of the shape.
   • Loop Audio: Toggle whether the audio loops.
4. Color Customization
   • Select from predefined color presets (Rainbow, Fire, Ocean, Forest) or customize your own colors.
5. Start, Pause, and Stop Controls
   • Use the Start, Pause, and Stop buttons to control the audio playback and visualization.

Shapes

The visualizer supports a variety of shapes, each providing a unique visual experience:

• Sphere
• Cube
• Torus
• Spiral
• DNA
• Galaxy
• Fountain
• Wavy Plane
• Explosive Sphere
• Double Helix
• Donut
• Nautilus Shell
• Sphere Cloud
• Torus Knot
• Super Shape
• Clifford Attractor
• Ribbon Wave
• Mouth
• Flower

Click on the thumbnail to open the video☝️

Best Experience

• Large Screens: The visualizer is best experienced on larger screens where you can fully appreciate the intricate details and expansive visuals.
• Responsive Design: On smaller screens, the control box is hidden by default but can be toggled using the ☰ button at the top-left corner.

Notes

• This visualizer requires WebGL support in your browser.
• The performance may vary depending on your device’s capabilities and the complexity of the visualization.

Author

Created by bigsk1.

Download

https://gist.github.com/bigsk1/d2e76365c6371881c164f2f3e0e96bd4