Skip to main content
100%

Web tuner

✓ Published0🌍 Public
Aandresin87
Last edited Feb 25, 2016
Created on Feb 25, 2016

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.

AI-generated description

** The Web Tuner **

A Web tuner using:

The Scale includes all the auditive human threshold [A<sub>-1</sub>(13.75Hz) - G#<sub>9</sub>(26578.5Hz)].

#Instructions: Use Up/Down arrow keys to listen next/prev half tone and Left/Rigth arrow keys to listen prev/next octave. Type s or space to toogle (enable/disable) sound.

##Documentation: Music and mathematics.

Similar vizzes

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

Music Viz

A single highlighted note travels across a musical staff while the tune "Twinkle, Twinkle, Little Star" plays as a square-wave audio tone. The pitch of each played note determines the note’s vertical position via a D3 ordinal scale mapping clef pitches to y-coordinates. The visualization uses D3 v4 to render SVG elements and animate the note’s position with `requestAnimationFrame`, while the `tones.js` library generates the audio through the Web Audio API.

SSpaceActuary
72% match
Loading thumbnail…

Spectrum - Dots

This visualization presents a real-time audio spectrum analyzer that animates a canvas of colored dots. It uses the Web Audio API to capture microphone input, and then d3.js scales map frequency data to screen coordinates and color values. Each frame, the code reads frequency data using `analyser.getByteFrequencyData`, then draws fading circles to create a dynamic, trailing effect. The visualization displays the raw frequency amplitude, with low values shown in black and higher amplitudes in red, rendered as a continuously updating canvas animation.

Aalexmacy
70% 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
70% match
Loading thumbnail…

Fork of Rainbow Piano

This interactive visualization presents a two-octave piano keyboard rendered in SVG, with each white key colored in a distinct pastel rainbow hue. Users click individual keys to trigger a short synthesized sine wave tone, created through the Web Audio API's `createOscillator` and `createGain` nodes. Pressed keys temporarily darken via CSS transitions and React's `useState`, visually confirming the note selection. The layout maps 24 notes (C1 through B2) to specific frequencies, displaying numeric solfège labels on each key.

NNita
69% 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
69% match
Loading thumbnail…

Spectrum - Dots

A real-time audio spectrum analyzer renders live microphone input as a field of dots on a canvas. Each dot represents a frequency bin, with its vertical position mapped to amplitude via d3.scaleLinear and its color transitioning from white to red based on intensity. The visualization uses the Web Audio API’s AnalyserNode to capture frequency data, while d3.js scales the x and y coordinates. Animation runs continuously through requestAnimationFrame, drawing translucent overlays to create a fading trail effect.

Aalexmacy
69% match