The HTML5 Piano
Interested in getting a taste of what modern browsers can do? Enter The HTML5 Piano. This little JavaScript plug-in creates a keyboard piano that runs in your browser without any dependence on external plug-ins! Simply mouse down on a key to play a note or use the keyboard for total control. As a note, the piano does depend on draft-based technology, which is currently only supported by a subset of browsers. Luckily for you, checking for this dependency is not a requirement for implementation. Simply install the plug-in into your personal project or application and the Piano will gracefully handle browser requirement detection.Installation
To install The HTML5 Piano, begin by downloading the source code as either a zip archive or a compressed tarball. If you are a Git user, you can also pull the latest revision of HTML5 Piano from its GitHub repository. The source archive includes a production and development build of the piano source (html5piano.js), the image to use when an unsupported browser is detected (browser.jpg), and a folder that holds the audio data (instruments). You may distribute these assets into your server however you like, just make sure to update the references (at the top of the piano source), so that the script knows where to find them.
Once the script is properly configured, add it to your source code and then run the initializer when your document is ready. Since I use jQuery, the example below shows how to call the the initializer using jQuery’s ready() method:
The initializer above should get you started, but the real power of HTML5 Piano comes from customizing it, via the optional second argument in the load method. For more info on how to leverage the full API, reference the documentation below.
API Documentation
The following methods and properties are publicly available via the Piano API.
Piano.load(container [, options])
- container
- An element that will hold the piano created by the load method. You may provide the id of the container as a string, or simply pass the HTMLElement itself.
- options
- An optional JavaScript map that can be used to customize the size, appearance, and sound of the piano.
- height
- The height (in pixels) of the piano, default 150
- width
- The width (in pixels) of the piano, default 150
- voice
- The voice to use for the piano, must be an enumeration of Piano.Voices, default Piano.Voices.GRAND_PIANO
- backgroundFill
- The hex color code for the background fill color, default "#8A4B08"
- backgroundStroke
- The hex color code for the background stroke color, default "#000"
- whiteKeyFill
- The hex color code for the white keys fill, default "#FFF"
- whiteKeyStroke
- The hex color code for the white keys stroke, default "#333"
- blackKeyFill
- The hex color code for the black keys fill, default "#000"
- blackKeyStroke
- The hex color code for the black keys stroke, default "#333"
- activeKeyFill
- The hex color code for the active (pressed) keys fill, default "#333"
- activeKeyStroke
- The hex color code for the active (pressed) keys stroke, default "#000"
- loaderFill
- The hex color code for the loader bar text and bar fill, default "#000"
- loaderFont
- The font to use for the loader text, default "'Times New Roman', Times"
- titleColor
- The hex color code for the piano title text, default "#FFF"
- titleFont
- The font to use for the piano title text, default "'Times New Roman', Times"
- powerOnFill
- The hex color code for the power indicator fill (when on), default "#0F0"
- powerOnStroke
- The hex color code for the power indicator stroke (when on), default "#000"
- powerOffFill
- The hex color code for the power indicator fill (when off), default "#F00"
- powerOffStroke
- The hex color code for the power indicator stroke (when off), default "#000"
Piano.Voices
Currently, there is only support for one voice due to the overhead involved in making them work with all HTML5 audio elements. If you are willing to contribute, please contact me directly.- GRAND_PIANO
- Represents a grand piano voice