Hello WebMIDI

100%

✓ Published0🌍 Public

Last edited Sep 18, 2018

Created on Sep 18, 2018

This example demonstrates the use of the WebMIDI API to access MIDI devices and log incoming messages to the console. It requests MIDI access via `navigator.requestMIDIAccess`, iterates over the available inputs, and assigns a handler for `onmidimessage` events. Each MIDI message is parsed into its command, note, and velocity components, which are then logged as an object. The code relies on the browser’s native MIDI support and does not use any external libraries or visual rendering.

AI-generated description

Similar vizzes

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

61% match

Loading thumbnail…

Mirek - JavaScript

This example displays a large, centered “Hello HTML!” message in the browser, with the page styled through a simple CSS rule. Beneath the text, JavaScript constructs an array of ten integers using a custom `range` function and logs each number to the console via a `forEach` loop and `console.log`. No external libraries or visualization APIs are used; the piece relies solely on vanilla JavaScript, HTML, and CSS, providing a minimal demonstration of array generation and iteration within a web page.

MMirekBXL

57% match

Loading thumbnail…

JS Bin

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.

FFrankieFabuloso

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

55% match

Loading thumbnail…

Piano App

An interactive virtual piano with white and black keys generates musical tones through the Web Audio API, allowing play via mouse, touch, or keyboard. The instrument displays a realistic 3D design using CSS gradients and shadows, with visual feedback through CSS transitions on key presses. A built-in demo melody button triggers a pre-programmed scale. The implementation dynamically creates piano keys through DOM manipulation and uses Web Audio API for audio synthesis with gain control, demonstrating front-end techniques for responsive instrument interfaces.

NNita

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

54% match

Loading thumbnail…

JavaScript Arrays

This example demonstrates a minimal web page that displays the message “Hello HTML!” in large, centered text. The implementation uses an HTML file for structure, a CSS file with a `.message` class to style the font size and alignment, and a JavaScript file that logs “hello world” to the browser console. The code relies on standard web technologies—HTML, CSS, and vanilla JavaScript—without any external libraries or data sources, serving as a basic starter template for web development.

AAaron

53% match

Loading thumbnail…

JS Bin

This example connects a Spark Core IoT device to a web page, turning a div into a virtual LED and potentiometer display. The animation uses requestAnimationFrame to poll the device’s `potarValue` variable every 20 frames, updating a border-left width. Mouse enter and leave events call the `led` function via `device.callFunction` to turn the LED on or off. It demonstrates real-time hardware communication through the Spark JavaScript library, with the device’s status logged to the console.

MMAKIO135

53% match