Gist b7e664bfb668a567497d

100%

Gist b7e664bfb668a567497d

✓ Published0🌍 Public

Last edited Oct 2, 2020

Created on Sep 28, 2015

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.

AI-generated description

Waveform made for audiohackathon.com

Audio from Serial

Similar vizzes

Loading thumbnail…

Podcasts

This visualization maps a curated list of podcasts from a GitHub gist, plotting each title as a node in a force-directed graph. The layout uses `d3.forceSimulation` with `d3.forceLink` to connect podcasts sharing a common theme or network (e.g., history or NPR), while node size reflects the number of linked episodes. The graph is rendered on a Canvas via `getImageData` for pixel-level interactivity, with hover states highlighting related podcasts. Data comes directly from the markdown file, parsed client-side. The background is a subtle grid, and the overall effect emphasizes the interconnected web of intellectual audio content.

DDylanFM

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

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

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…

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

This interactive parallel coordinates chart visualizes audio features of songs by selected artists, including energy, liveness, valence, speechiness, and danceability. Users click buttons to load CSV data for different artists, which triggers a D3 v6 animation that redraws the plot lines. The SVG rendering uses d3.scaleLinear for axes, d3.scalePoint for positioning, and d3.scaleOrdinal to color lines by playlist genre, with a legend displayed on the right. The data is sourced from GitHub-hosted CSV files.

Vvedant74

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

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

69% match