Sonagraph

100%

✓ Published0🌍 Public

Last edited Apr 10, 2017

Created on Apr 10, 2017

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.

AI-generated description

Small side project to play about with the idea of waterfall graphs. This drew on code from Jos Dirksen's excellent page here.

Because it tries to access the microphone you will need to access it using https and to allow the use of the microphone.

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

73% 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…

SpectrogramJS

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.

JJoker-tr

72% match

Loading thumbnail…

Audio viz

This example visualizes a randomly generated audio buffer as a waveform on a Canvas. It creates an `AudioBuffer` with 10,000 samples of white noise, then draws the signal as a continuous line across the canvas width. The code uses the native Canvas 2D API (`getContext`, `moveTo`, `lineTo`, `stroke`) with D3 v7 available for potential enhancements, while the page itself is styled with minimal CSS and hosted in a plain HTML file.

GgwendalF

69% 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

66% 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

65% match

Loading thumbnail…

circular-synth

This interactive visualization builds a circular synthesizer where each of the 16 beats is a rotating segment containing concentric pitch arcs. Users click or hover over arcs to toggle notes on and off, with four states cycling through white, blue, red, and green. The visualization uses D3’s `d3.svg.arc` and linear scales to map pitch frequencies to radii, while an audio context schedules oscillators for each active note. A `setInterval` loop advances the beat, highlighting the current segment in purple and triggering sounds through the Web Audio API’s `createOscillator` and `createGainNode`.

11wheel

64% match

Loading thumbnail…

Document

A real-time waveform plot on a canvas scrolls horizontally as new random data points arrive, creating a dynamic line graph. The animation updates every 100 milliseconds, shifting the drawing origin leftward and clearing the canvas to simulate an endless stream. Built with the HTML5 Canvas API, it uses `setInterval`, `clearRect`, and `translate` to manage the redraw cycle. The line is drawn in red, showing a continuous trace of fluctuating y-values around a baseline.

KKelvinZCH

64% match