Skip to main content
SimilarExport ZIP
100%

Audio viz

✓ Published0🌍 Public
GgwendalF
Last edited Feb 18, 2022
Created on Feb 18, 2022

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
74% match
Loading thumbnail…

Untitled

This interactive visualization demonstrates how different easing functions shape periodic waveforms and their interference patterns. It renders two wave paths from audio buffers generated with selectable easing curves, plus a combined average wave, using SVG paths and a circular position marker. Users can choose easing functions for each wave, adjust playback speed, and trigger audio playback. Built with React, it uses d3.v4’s scaleLinear, line, curveMonotoneX, and timer APIs, while audio synthesis relies on the Web Audio API’s AudioContext, Buffer, and BufferSource for looping sound.

WWill Carter
71% 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
69% match
Loading thumbnail…

contours with audio

This example visualizes the distribution of randomly generated points as animated contour lines that respond to audio frequency data. The code uses D3's `contourDensity` and `geoPath` to compute and render density contours, while an AudioContext analyzer extracts frequency data to drive point movement in real time. Points are rendered as small steelblue circles, and the contour paths update dynamically as points shift based on the audio input. The visualization demonstrates how D3 can integrate web audio APIs with geographic projection techniques for interactive, sound-reactive data displays.

DDilara Bozkurt
69% 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
69% match
Loading thumbnail…

HTML Canvas Wave Line

This example demonstrates a sine wave pattern drawn on an HTML canvas element, showing how mathematical functions can generate visual curves. The wave oscillates vertically across the 800-pixel-wide canvas, centered vertically with an amplitude of 50 pixels and a frequency controlled by dividing the x-coordinate by 50. The visualization uses the Canvas API's `getContext('2d')` method and `lineTo()` function to plot each point incrementally, advancing horizontally by 2 pixels per iteration. A goldenrod border frames the canvas, while the wave itself is rendered with the default black stroke. No external libraries are used; the implementation relies purely on native JavaScript and the HTML5 Canvas API.

JJack Lyons
67% match
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
66% match
Loading thumbnail…

HTML Starter

This example shows a static sine wave path plotted on an SVG canvas, with a minimal setup for animating it over time. The code generates coordinate arrays using a loop and maps them to pixel positions, then renders the line with `d3.line()`. It uses D3 v5 and React, with SVG rendering and transitions prepared via `transition().attr()`. The HTML page loads D3 from a CDN and relies on a separate `bundle.js` for the visualization logic.

SSoUmItRoBoT
65% match