Web Audio Sampler with Effects

100%

Web Audio Sampler with Effects

✓ Published0🌍 Public

Last edited May 16, 2017

Created on Nov 26, 2016

This interactive Web Audio Sampler visualizes audio waveforms as SVG paths, with a main focus wave and a smaller context wave for navigation. Users can load audio files, then brush and zoom on the main wave to select portions, apply fade-in/out effects using D3 v4’s native easing functions, or add delay effects with adjustable intervals. The interface also supports playback, looping, and clearing cue points, with red position markers indicating playback location.

AI-generated description

Another update to <a href="http://bl.ocks.org/alexmacy/0ecc505b717acc18936284464c4b8185">this sampler</a>, with these new features:

Ability to brush and zoom on the main wave.
An effect for fading in or out, shaped using d3's native easing types.
A delay effect with adjustable delay intervals calculated when loading the sample

mit Licensed

Similar vizzes

Loading thumbnail…

Web Audio Sampler v2

This interactive Web Audio sampler loads audio files from a GitHub repository or the user’s local machine, displaying the waveform as an SVG path rendered with d3.line. Users can click the timeline to start playback, shift-click to place up to nine custom cue markers, and use number keys to jump to cues. The code uses d3.v4 for scales, event handling, and transitions, while the Web Audio API handles audio decoding, buffer sources, and looping. A red position line and hover line animate to show playback progress, with looping controlled by a checkbox.

Aalexmacy

87% match

Loading thumbnail…

Sampler using Web Audio

This interactive audio sampler displays a waveform of an imported WAV file and divides it into eight equal sections. Users trigger playback from any section by pressing the corresponding number key or touching the waveform on mobile devices. A red line animates across the waveform to show playback position while the active section highlights in blue. The visualization uses d3.v4 for SVG rendering, transitions, and scales, alongside the Web Audio API for audio decoding and playback. A stop button resets the playback position and highlights.

Aalexmacy

84% match

Loading thumbnail…

Audio Synth via d3-ease

This example generates an audio waveform from scratch by combining four different waves—elastic, sine, square, and triangle—whose ratios change based on mouse position, affecting the timbre. The waveform is rendered as an SVG path using `d3.line` with `d3.curveMonotoneX`, while audio is produced via the Web Audio API. Each wave is derived from D3 easing functions: `d3.easeElasticIn`, `d3.easeSinInOut`, `d3.easeLinear`, and `Math.round` for the square wave. Labels show the current percentage mix of each wave.

Aalexmacy

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

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

75% match

Loading thumbnail…

Web Audio Theremin & Oscilloscope

A Web Audio Theremin lets a user control pitch and volume by moving the mouse vertically and horizontally, with a circular cursor tracking the pointer. An oscilloscope displays the live waveform, while a frequency ticker records recent pitch history as a filled area. The code uses D3 v4 for SVG rendering, transitions, and scales, alongside the Web Audio API's `OscillatorNode`, `GainNode`, and `AnalyserNode` to generate and visualize sound.

Aalexmacy

74% match

Loading thumbnail…

Wave Phasing

Two waveforms, each generated by applying a different D3 easing function to a sawtooth wave, are drawn as dashed gray lines and summed into a solid red wave. Drop-down menus select the easing functions and the phase offset speed, while a button starts and stops animation and audio playback. The code uses D3 v4’s `d3.line`, `d3.timer`, and `d3.scaleLinear`, and the Web Audio API to generate and loop the sound, with a circle marker tracking the summed wave’s value.

Aalexmacy

73% match

Loading thumbnail…

I Am Sitting in a Room - Alvin Lucier

This visualization demonstrates the progressive audio distortion of Alvin Lucier’s *I Am Sitting in a Room* by repeatedly applying delay offsets to a waveform. It displays the original audio as a static context wave and a zoomable focus wave, with a red position indicator tracking playback. Users trigger each effect step via buttons, while a brush and d3.zoom enable panning and scaling. Built with d3.v4 and the Web Audio API, it renders SVG paths from decoded audio data and animates the waveform as the effect layers copies of the track.

Aalexmacy

72% match