conwayjw97/3d-spectrogram

This project turns sound into a moving 3D landscape you can watch in your web browser. It listens to audio, either from a browser tab or a microphone input, and continuously renders the different frequencies present in that sound as a scrolling terrain made of hills and valleys, updating in real time as the audio plays. The visual effect is built using Three.js, a popular library for creating 3D graphics inside a web page, along with custom GLSL shaders, small programs that run directly on the graphics card to calculate how the terrain should bend and move based on the incoming sound. The Web Audio API, a browser feature for capturing and analyzing audio, supplies the raw frequency data that drives the visualisation. The terrain shows several kinds of information at once. The front edge displays the currently active frequencies, while the back edge tracks the loudest each frequency has ever peaked during the session. The two side edges show the maximum and average loudness recorded over time. Labels around the terrain update automatically to show frequency values in Hz or kHz and volume in decibels. Users can freely rotate, pan, and zoom the view to inspect the terrain from any angle, and a control panel offers sliders to adjust which frequency range is shown, how much time history is displayed, and whether the audio comes from a microphone or a browser audio stream. The code is organized into a few clear files: one sets up the 3D scene and rendering loop, one manages the on screen controls and labels, one handles audio capture and analysis, and one contains the custom shader code responsible for the visual deformation effect. To run it, a user needs to clone the project and serve it from a simple local web server, since the code uses modern JavaScript modules that browsers block from loading directly off the file system for security reasons. A one-line command using Python or Node.js is enough to start that server.