Zoetone: 3D Web Audio Visualizer

Immersive, Interactive, Multi-Channel Audio Visualizer for VR and 3D web apps

Zoetone 3D Audio Visualizer

Immersive, Interactive, Multi-Channel Music Visualization

Project Summary

Zoetone is a browser-based, real-time 3D audio visualizer and performance tool. Users can assign, control, and mix up to six independent audio channels, each visualized as a responsive 3D entity in a WebXR scene. Designed for creative exploration and technical robustness, Zoetone bridges music, code, and interactive art.

Features & Tools

  • Dynamic Channel Management: Add, remove, and assign audio tracks (up to 6) with a user-friendly UI.
  • Per-Channel Audio Upload: Upload your own audio files or provide URLs for each channel, enabling custom mixes and live remixing.
  • Live Audio Analysis: Each channel is analyzed in real time, driving unique 3D visual effects and animations.
  • 3D Model Customization: Instantly update the main scene object by uploading your own .glb/.gltf model or providing a URL. Fine-tune scale and rotation (X, Y, Z) with intuitive sliders.
  • Camera Orbit Controls: Enable orbit mode and adjust camera radius, height, and speed for dynamic scene exploration.
  • WebXR & A-Frame: Built with A-Frame for immersive, cross-platform 3D experiences.
  • Robust UX: Handles browser autoplay restrictions, CORS, dynamic asset loading, and provides error feedback for uploads.
  • Accessible Controls: Play/pause, minimize UI, and per-channel configuration for live performance or demo use.

Implementation

  • JavaScript & Web Audio API: Real-time audio analysis and event-driven UI logic.
  • Dynamic DOM & Scene Updates: Audio elements and 3D entities are created, removed, and linked on the fly.
  • Custom Events & State Management: Ensures reliable initialization and synchronization between UI, audio, and visuals.
  • Portfolio-Ready: Designed for easy demoing, remixing, and extension.

Challenges

  • Browser Compatibility: Overcame CORS and autoplay restrictions for seamless user experience.
  • Dynamic Asset Management: Ensured UI, audio, and 3D scene remain in sync as channels or models are added/removed.
  • Performance: Optimized for smooth real-time visualization and audio reactivity.

Outcome

  • Interactive Demo: Users can explore, remix, and visualize music in a spatial, interactive environment.
  • Creative Platform: Serves as a foundation for live performance, education, or further creative coding projects.
  • Positive Feedback: Praised for its flexibility, robustness, and engaging visual-music interplay.