MIDI.js - Sequencing in Javascript.

A0
Bb0
B0
C1
Db1
D1
Eb1
E1
F1
Gb1
G1
Ab1
A1
Bb1
B1
C2
Db2
D2
Eb2
E2
F2
Gb2
G2
Ab2
A2
Bb2
B2
C3
Db3
D3
Eb3
E3
F3
Gb3
G3
Ab3
A3
Bb3
B3
C4
Db4
D4
Eb4
E4
F4
Gb4
G4
Ab4
A4
Bb4
B4
C5
Db5
D5
Eb5
E5
F5
Gb5
G5
Ab5
A5
Bb5
B5
C6
Db6
D6
Eb6
E6
F6
Gb6
G6
Ab6
A6
Bb6
B6
C7
Db7
D7
Eb7
E7
F7
Gb7
G7
Ab7
A7
Bb7
B7
C8
0:07 -2:29
Sound being generated with webaudio {"audiotag":true,"webaudio":true,"audio/mpeg":false,"audio/ogg":true}

What’s all this hubub?

MIDI.js ties together, and builds upon frameworks that bring MIDI to the browser. Combine it with jasmid to create a web-radio MIDI stream similar to this demo, or with Three.js, Sparks.js, or GLSL to create Audio/visual experiments. Piano/guitar simulations, Drum machines, and all kinds of certified funkitude is within your grasps!

Google Chrome, Firefox, Opera, or Safari is recommended for best listening experience. Internet Explorer sounds a bit more like the piano has been drinking, arrr.

Carpe beerum, and commandeer yer own copy!

Basic Examples

  1. Basic (play note)
  2. MIDI Player
  3. Whitney Music Box

Demos

  1. Color Piano by Michael Deal mudcube
  2. 3D Piano Player w/ Three.js by Borja Morales @reality3d
  3. Simon Says by Daniel Christopher uxmonk
  4. Brite Lite by Daniel Christopher uxmonk
  5. Euphony 3D Piano by Xueqiao Xu @qiao
  6. VexFlow by Mohit Muthanna @11111110b
  7. Spiral Keyboard by Patrick Snels
  8. Whitney Music Box by KrazyDad
  9. Ragamroll by Mani Balasubramanian

Many thanks to the authors of these libraries!

  1. <audio>:  HTML5 specs
  2. WebAudio API:  W3C proposal by Google
  3. WebAudio API Shim
  4. WebMIDI API
  5. WebMIDI API Shim
  6. SoundManager2 by Scott Schiller (Flash fallback)
  7. jasmid:  MIDI file byte-code reader, and translats into a Javascript array.
  8. Base64binary.js:  Converts base64 soundfonts to binary for Web Audio API.