SpectrogramJS

100%

✓ Published0🌍 Public

Last edited Jan 2, 2020

Created on Jan 2, 2020

This interactive spectrogram visualizes audio frequencies in real time, displaying a scrolling heatmap of sound data across time. The project uses the Web Audio API to analyze audio buffers and D3.js (v5) for rendering the SVG axes and canvas-based spectrogram. Playback controls allow users to load and analyze sound files, with the frequency analysis performed via `AnalyserNode.getByteFrequencyData`. The visualization animates as audio plays, building up the spectrogram view.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

SpectrogramJS

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.

JJoker-tr

93% match

Loading thumbnail…

Spectrogram Visualization

This spectrogram visualization renders audio frequency data as a series of colored rectangles across an SVG canvas. The code loads a CSV file containing 13 numeric columns representing frequency bins and maps each row to a rectangular band using D3’s data join. The example uses d3.csv for data loading, d3.scaleLinear for horizontal positioning, and d3.select to manipulate the SVG elements. The rectangles are appended with a fixed height, though the width calculation appears incomplete in the code.

NNeeraj Gopalakrishnan

79% match

Loading thumbnail…

Gist b7e664bfb668a567497d

An interactive audio visualization displays frequency data from a podcast episode as scattered points and a waveform on a black canvas. D3.js drives the animation loop, while the Web Audio API’s `AnalyserNode` captures frequency bins in real time. Two layered canvas contexts render fading frequency bars and a moving line, with colors shifting based on overall audio intensity. Clicking a button starts playback of the Serial podcast audio file, synchronizing the visualization with the sound.

11wheel

72% match

Loading thumbnail…

Sonagraph

This example shows a real-time waterfall spectrogram that maps audio frequency data from the user’s microphone into a scrolling visual of colored pixels. It uses the Web Audio API’s `AnalyserNode` to capture frequency amplitudes, then renders each frame onto an HTML5 Canvas. The code copies the canvas with `drawImage`, shifts it downward via `translate`, and colors each frequency bin using the chroma.js color scale, producing a continuously updating graph of sound over time.

Dd3noob

72% match

Loading thumbnail…

Untitled

An interactive sound visualization displays a scatterplot of audio samples, each represented by a draggable circle colored by sound category (Clap, Whoosh, Punch, etc.) using d3.scaleLinear and d3.schemeCategory10. Clicking a circle plays the corresponding audio file via the Web Audio API and WebAudiox library, while a color legend filters highlights by category. Hovering shows tooltips, and the view supports zooming and panning through d3.zoom. The project uses D3 v3 with SVG rendering and imports from d3 modules for scales, axes, drag behavior, and data binding.

Oocean1225

71% match

Loading thumbnail…

Scatter Plot with Layers

An interactive scatter plot maps sound effects as colored, draggable circles organized by category using a custom legend. Clicking a circle plays its corresponding audio file, while hover reveals the name via a tooltip. The visualization supports zooming, panning, and keyboard controls to pause playback. Built with D3 v5, it uses SVG for rendering and the Web Audio API alongside jQuery for sound management.

Jjacoyat08

70% match

Loading thumbnail…

Scatter Plot with Layers

This interactive scatter plot visualizes sound-effect files and their layered components as color-coded circles, with each main sound accompanied by its sub-layers. Built with D3 v5, it uses SVG and canvas rendering, enabling users to play audio by clicking circles, pause with the Q key, drag overlapping circles, and zoom or pan the view. A legend filters sounds by category, and hover reveals file names. The visualization incorporates Web Audio API via webaudiox.js for sound playback and jQuery for keyboard event handling.

JJaloYang

69% match

Loading thumbnail…

Scatter Plot with Legends

This interactive scatter plot maps sound samples by their audio features, with color-coded categories such as Clap, Gunshot, and Whoosh. Users click circles to play audio, press Q to stop playback, and select legend items to highlight categories. The visualization supports zooming, panning, and dragging circles to explore overlapping points, with hover tooltips revealing names. Built with D3 v5, it uses SVG rendering, d3-drag for interactions, and the WebAudiox API for audio playback, displaying data from a JSON file.

JJaloYang

69% match