This website contains a collection of examples of Javascript-based music applications.

• Basic HTML

  Examples of basic HTML elements, scripting, interaction with elements on page.

• jQuery UI

  Examples of jQuery UI elements (buttons, text input, sliders, select menus) and related functions.

• Howler

  How to play audio files using the Howler Javascript library.

• Playing Selected Notes

  Play musical notes specified with a user interface. Builds on code from the jQuery and Howler examples.

• Vexflow

  How to render music notation with the Vexflow Javascript library.

• Canvas

  Basic Javascript commands for drawing on a Canvas element.

• Canvas: Piano Keys

  Adaptable code for drawing piano keys on a canvas.

• Canvas: Piano Keys + Labels

  Adaptable code for drawing piano keys and labels on a canvas.

• Loop

  Structured code for setting up a loop of code that runs at 60 FPS.

• Keyboard Input

  Responding to real-time keyboard input. Builds on code from the Loop example.

• Interactive Piano Diagram

  Press keyboard keys corresponding to piano notes (see diagram on page) and the corresponding notes will be highlighted on a separate diagram. Builds on code from the Keyboard Input and Canvas Piano examples.

• Dynamic Vexflow Input

  Press keyboard keys corresponding to piano notes (see diagram on page) and the corresponding notes will be rendered on a music staff. Builds on code from the Keyboard Input and Vexflow examples. Diagram generated from code based on the Canvas: Piano Keys and Labels example.

• WebMIDI Connection Test

  Uses the WebMIDI.js library. Basic setup for detecting connected MIDI keyboards and listening for input events. This and the following WebMIDI examples are only confirmed to work fully with Google Chrome browser.

• Playing audio with WebMIDI

  Connect a MIDI instrument and play piano note audio files when corresponding keys on the MIDI instrument are pressed. Builds on the code from the Howler and WebMIDI examples.

• Transposing notes with WebMIDI

  Connect a MIDI instrument and use a slider to transpose the notes that are played. Builds on the code from the jQuery, Howler, and WebMIDI examples.

• Playing audio with WebMIDI - updated graphics

  Connect a MIDI instrument and play piano note audio files when corresponding keys on the MIDI instrument are pressed. Builds on the code from the jQuery, Howler, WebMIDI, and Canvas Piano examples.