Post

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

Watch the video

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.

© bigsk1. Some rights reserved.

AI | Tech | HomeLab | Crypto | Docker and more 🚀