Realtime visualization of 3D spectrogram with THREEJS shaders

I've been working with 2D spectrograms for a while now while working with Speech recognition. It had always fascinated me how speech and words had such distinct features. Looking at spectrograms is essentially like hearing with your eyes. Over the weekend i built a tool to visualize your own audio into a spectrogram in 3D. I used threeJS with shaders and vanilla JS/Html. Play with it here : https://spectrogram-threejs.vercel.app/ I hope it brings you as much joy as it does for me.

Alternatives

In plain words

This tool converts audio into an interactive 3D spectrogram visualization using THREE.js and WebGL shaders. Users can upload their own audio files to see frequency patterns and speech characteristics rendered as three-dimensional landscapes. Built with vanilla JavaScript and HTML, it transforms how spectrograms are typically viewed, making audio analysis more intuitive and visually engaging for anyone interested in sound visualization or speech recognition.

written from the facts on this page · September 2026

More life & fun this month

the category →

TL
The load-bearing vocabulary of Claude▲703
Life & fun · 10d ago · louisabraham.github.io
iPhone app takes simultaneous images from 2 lenses, fuses into 1 photo▲329
Photosynthesis fires two of your iPhone
Life & fun · 28d ago · photosynthesis.camera
SoloUno▲310
Take control of hair pulling, nail biting & skin picking
Life & fun · 28d ago · solouno.io
Scroll through all 43252003274489856000 Rubik's Cube states▲295
Scroll through all 43,252,003,274,489,856,000 reachable Rubik's Cube permutations.
Life & fun · 26d ago · everycube.alen.is
Expeditione▲265
The Interactive 3D Encyclopedia
Life & fun · 21d ago · expeditione.fun
Eigendrum - Draw any shape and hear what it sounds like as a drum▲243
Hi HN, I built Eigendrum, a web tool that solves the 2D wave equation for arbitrary shapes so you can hear what they sound like as drums. How it works: * Solves -∇²u = λu using finite element analysis (Kφ = λMφ) on a triangle mesh. * Validated to <0.1% error against closed-form solutions for circles (Bessel zeros) and rectangles. * Sound model factors in strike location, Rayleigh damping, and mallet width. * Includes Kac drums I & II to demonstrate identical sound spectra from different geometries. * No frameworks, build steps, or dependencies. Repo and tests:…
Life & fun · 26d ago · baselashraf81.github.io

Launched alongside, August 2022

the whole month →

Xnapper▲1,517
Take beautiful screenshots instantly
Work · 2022 · xnapper.com
Gamma▲1,169
Write like a doc, present like a deck
Work · 2022 · gamma.app
Threado▲923
The command center for community builders
Life & fun · 2022
Remotebase▲742
Build remote engineering teams in 24 hours
Dev tools · 2022 · remotebase.com
DhiWise 2.0▲737
Convert Figma designs into Flutter 3.0 & React code rapidly
Dev tools · 2022 · dhiwise.com
PA
Pornpen.ai – AI-Generated Porn▲711
Hey HN, I've been working on https://pornpen.ai, a site for generating adult images. Please only visit the site if you are 18+ and willing to look at NSFW images. This site is an experiment using newer text-to-image models. I explicitly removed the ability to specify custom text to avoid harmful imagery from being generated. New tags will be added once the prompt-engineering algorithm is fine-tuned further. If the servers are overloaded, take a look at the feed and search pages to look through past results. For comments/suggestions/feedback please visit…
AI · 2022 · pornpen.ai