Skip to main content
100%

Web Audio Theremin & Oscilloscope

✓ Published0🌍 Public
Aalexmacy
Last edited Nov 28, 2016
Created on Oct 27, 2016

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.

AI-generated description

This is a theremin with a built-in oscilloscope, made using the Web Audio API. This was my first time working with Web Audio and the next thing I want to integrate is using multiple oscillators and filters to manipulate the waveform when moving the mouse horizontally. Until then, vertical movement changes frequency while horizontal movement changes the gain.

** Update: Added the ability to select a waveform from a drop-down at the top left.

mit Licensed

Similar vizzes

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

Rotating Ellipses v1

This visualization uses the computer’s microphone as its data source, drawing the live audio waveform as a series of concentric, rotating ellipses on a Canvas. Each ellipse corresponds to a sample in the audio buffer, with its size scaled logarithmically via `d3.scaleLog` and its rotation based on the sample’s position in the buffer. The code uses the Web Audio API’s `AnalyserNode` to capture time-domain data, then redraws the entire scene every animation frame with `requestAnimationFrame`. The result is a dynamic, red-on-black display that reacts in real time to sound volume and pitch.

Aalexmacy
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…

Hello Sound!

This example uses the Web Audio API to play two sawtooth tones a major third apart, each triggered sequentially after a one-second pause. The code converts MIDI note numbers to frequencies using a mathematical formula, then creates and starts an oscillator through an AudioContext. Oscillator lifecycle events schedule the second note, while a biquad filter is instantiated but not connected. The page itself displays only a static message, with styling handled by CSS and no D3 visualization logic present despite the D3 library being loaded.

RRubens
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