Sampler using Web Audio

100%

Sampler using Web Audio

✓ Published0🌍 Public

Last edited Nov 15, 2016

Created on Nov 6, 2016

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.

AI-generated description

This is something I made using the Web Audio API along with d3.js. Lots of credit goes to my friend <a href="http://www.cooperbaker.com/" target="_blank">Cooper Baker</a> because this is like a VERY slimmed-down version of an application he made back when we were in college - I believe it was <a href="http://www.cooperbaker.com/lib/view.php?image=/home/code/maxmsp/files/gallery/images/cuisinart.png" target="_blank">cuisinart</a>. He's got some pretty cool stuff that's definitely worth checking out!

Anyway, you trigger the different cuts using the number keys that correspond with the numbered sections of the loop. Or if you are on a mobile device, touch the section you want to hear. When loading this directly instead of in its <a href="http://bl.ocks.org/alexmacy/raw/5e4b763bf399027de8c110086c74eba0/" target="_blank">own window</a>, you might have to click inside the iframe so that it can detect keystrokes.

Here's an updated version with the ability load more samples and customize the cues: <a href="http://bl.ocks.org/alexmacy/0ecc505b717acc18936284464c4b8185">Web Audio Sampler v2</a>.

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

85% match

Loading thumbnail…

Web Audio Sampler with Effects

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.

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

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

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

68% match

Loading thumbnail…

Web tuner

This interactive web tuner visualizes the entire audible frequency range (A-1 at 13.75Hz to G#9 at 26578.5Hz) as a continuous circular scale, with the current note highlighted and animated as the user navigates. Built with D3.js for SVG rendering and Timbre.js for audio synthesis, it uses canvas for real-time sound visualization. Users explore the chromatic scale using arrow keys — Up/Down for adjacent semitones, Left/Right for octave jumps — while pressing S or Space toggles the generated sound on and off, linking visual position to auditory frequency.

Aandresin87

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

68% match

Loading thumbnail…

Additive Synthesizer

This interactive demo visualizes additive synthesis, where up to ten sine waves are combined to produce a single complex tone. Each wave has individual controls for frequency, amplitude, phase, and offset, with checkboxes to mute specific oscillators. The visualization displays the compound wave in red alongside the individual component waves, rendered as SVG paths animated in real time. The audio engine uses Web Audio's createPeriodicWave() method to generate the composite tone from a Fourier series populated by the oscillator values, with phase offsets handled via 2D rotation. The "Random Wave" buttons generate arbitrary combinations of frequencies, amplitudes, and phase offsets.

Aalexmacy

67% match