JS Bin

100%

✓ Published0🌍 Public

Last edited Feb 8, 2017

Created on Feb 8, 2017

This example presents an interactive musical keyboard built with the Web Audio API, where each piano-style button corresponds to a specific note (C through B). The page shows how a single oscillator can generate tones by connecting and disconnecting it from the audio destination on button press and release. The code uses `AudioContext`, `createOscillator`, and `createGain` from the Web Audio API, with square-wave synthesis producing the sound. The interface relies on HTML button elements with `onmousedown` and `onmouseup` handlers to trigger the `noise()` and `silence()` functions, which set the oscillator frequency and toggle its connection. The source is a standalone HTML file with embedded JavaScript, rendering no visual data but demonstrating audio-frequency control.

AI-generated description

Similar vizzes

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

68% match

Loading thumbnail…

Circle Piano

A circular piano keyboard displays seven musical notes repeated across a ring, with black keys for sharps and white keys for naturals. Hovering or touching a key expands its arc outward while simultaneously playing a square-wave tone via the Web Audio API. Built with D3 v4, the visualization uses `d3.pie` and `d3.arc` for geometry, `transition.attrTween` for smooth animation, and SVG for rendering.

Mmbostock

65% match

Loading thumbnail…

Arc Piano

The visualization displays a semicircular piano keyboard whose keys extend outward when hovered or touched. It uses a D3 pie layout for the key positions, with custom arc tweening via `transition.attrTween` to animate the radial expansion. The code generates audio tones using the Web Audio API's `createOscillator` and `createGain` nodes, playing a square wave at a computed frequency for each key. The SVG rendering uses D3's `d3.arc` with corner radii and two inner-radius levels to distinguish sharp and white keys.

Mmbostock

65% match

Loading thumbnail…

JavaScript事件

This example demonstrates a simple user interface for selecting and previewing sound effects using native JavaScript event handling. The page provides a dropdown menu with four sound options and a "试听" (preview) button that triggers playback of a fixed audio file hosted remotely. The code uses the HTML `select` and `button` elements, with an inline `onclick` handler invoking the `playsound()` function. This function accesses the `audio` element by ID and calls its `play()` method, relying on the browser’s built-in HTML5 audio API rather than any external visualization libraries.

Oocean1225

65% match

Loading thumbnail…

React + styled-components starter template

This example is a React starter template using styled-components for UI styling. It demonstrates a basic interactive keyboard component with five keys (A, S, D, F, G) that trigger sine-wave tones via the Web Audio API. A slider and number input control a pitch value, which is passed to the oscillator’s frequency when a key is pressed or released. The code uses React hooks like `useState` and `useEffect` to manage audio context, oscillator state, and pitch updates, with styled-components’ `createGlobalStyle` and template literals for global and component-level styling.

LLandoLabrum

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

64% match

Loading thumbnail…

Gist 7942740a263d3aa26e8c77adad206372

This visualization is an interactive canvas-based musical instrument that maps a two-dimensional grid of colored, circular nodes to specific musical notes. It shows how different spatial regions correspond to different tones, with the size and color of each node likely encoding additional sonic parameters such as pitch or octave. The application uses a custom `PitchDetector` algorithm and a `Player` class to translate node interactions into audio output, while the rendering relies on Canvas drawing operations. The code references the `notes_midi_freq.csv` dataset to map note names and MIDI numbers to their corresponding frequencies, enabling the generation of accurate musical tones.

MMAKIO135

62% match

Loading thumbnail…

Percussion

A beat machine lets users compose a rhythmic loop by toggling 16-step patterns across eight percussion instruments. A live playback cursor highlights the current tick, triggering synthesized sounds via the Howler.js audio library while the grid visually pulses with the beat. The interface supports mouse clicks and keyboard shortcuts (A through semicolon) for real-time pattern editing, and a metronome track is pre-enabled. The animation shows a glowing column sweeping across the grid, with active notes highlighted in purple, built with jQuery, FastClick, and CoffeeScript.

MMAKIO135

61% match