Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SpectrogramJS

Public visualization

Viewing a saved revision (read-only)

7a48992ac66947a3a6bed9822a8a6913

SpectrogramJS

0 stars0🌍 Public
JJoker-tr
Last edited Jan 2, 2020
Created on Jan 2, 2020
Forked from Hello VizHub

A spectrogram visualization displays the frequency spectrum of an audio file over time, rendered as a scrolling heatmap across a canvas. The example loads a duck sound effect, analyzes it with the Web Audio API’s `AnalyserNode`, and records frequency data during playback. D3.js draws the axes and scale grid as SVG overlays, while the spectrogram’s pixel data is painted onto the canvas. Playback and analysis run via `ScriptProcessorNode` and `requestAnimationFrame`, and the visualization updates in real time until the sound finishes.

AI-generated description

An example showing the capabilities of VizHub.