Audio Synth via d3-ease

100%

Audio Synth via d3-ease

✓ Published0🌍 Public

Last edited Nov 29, 2016

Created on Nov 29, 2016

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.

AI-generated description

This generates an audio waveform from scratch by combing different waves that have been generated using d3's easing functions. 'Elastic' is created using d3.easeElasticIn(), 'sine' uses d3.easeSinInOut(), 'triangle' uses d3.easeLinear(), and 'square' is generated using Math.round(). Moving the mouse causes the ratio of each wave to change, effecting the timbre.

For more Web Audio fun, check out:

<a href="http://bl.ocks.org/alexmacy/5f5d6f75a44f27f19a2eebf7771ed73e">Phase Shifting</a>
<a href="http://bl.ocks.org/alexmacy/f25c39867546f8c72af13cb7e5bc654a">I Am Sitting in a Room - Alvin Lucier</a>
<a href="http://bl.ocks.org/alexmacy/d31b0819f11fc881add341ace6483bd3">Web Audio Sampler with Effects</a>
<a href="http://bl.ocks.org/alexmacy/41bf2c3727c59a3366528807c2c708b2">Web Audio Theremin & Oscilloscope</a>

mit Licensed

Similar vizzes

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

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

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

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

74% match

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

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

73% match

Loading thumbnail…

Sine Wave

This visualization displays a sine wave rendered as an SVG path. The wave is generated using D3.js version 5, with the `d3.line` generator and `d3.scaleLinear` for mapping data points to screen coordinates. The animation updates the wave’s phase over time using `d3.interval`. The example demonstrates how to build interactive, time-based data visualizations with D3’s core modules, including axis creation via `d3.axisBottom` and `d3.axisLeft` for reference lines.

AAndy Zhang

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

71% match