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
- Upload an Audio File
- Click on “Choose Audio File” and select an audio file from your device.
- Select a Shape
- Use the dropdown menu to choose from various shapes like Sphere, Cube, Torus, Spiral, and many more.
- 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.
- Color Customization
- Select from predefined color presets (Rainbow, Fire, Ocean, Forest) or customize your own colors.
- 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
This post is licensed under CC BY 4.0 by the author.