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. It enables users to assign, control, and mix up to six independent audio channels, each visualized as a responsive 3D entity in a WebXR scene. Designed for both 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.
• Live Audio Analysis: Each channel is analyzed in real time, driving unique 3D visual effects and animations.
• WebXR & A-Frame: Built with A-Frame for immersive, cross-platform 3D experiences.
• Customizable Audio: Load your own audio URLs or use provided demo tracks.
• Robust UX: Handles browser autoplay restrictions, CORS, and dynamic asset loading.
• 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: 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 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.