piano's Introduction

piano

Creates an SVG piano keyboard for inclusion in a web-page, where key widths are accurately in position.

This keyboard has following properties:

Octave width = 161 pixels = x.
All white keys have equal width in front (W = x/7).
All black keys have equal width (B = x/12).
The narrow part of white keys C, D and E is W - B*2/3
The narrow part of white keys F, G, A, and B is W - B*3/4

See this page for the math.

usage

Create a container element for the piano in your HTML.
```
<div id="piano-container"></div>
```

Call the function that creates the piano.

var firstNote = 60; //60 is the  4th octave C (the so-called 'middle C').
var lastNote = 84;
var pianoContainer = document.getElementById('piano-container');
piano.drawSVGpiano(firstNote, lastNote, pianoContainer);

The optional "callback" argument is a function that will be called when an event happens on any piano key. This function can be defined like this:

var callback = function(event) {
  var note = event.target.note; //the note on which the event happened can be accessed like this
  var element = event.target; //the element that called the event can be accessed like this
  alert('You clicked on note: ' + note); //do something
}
piano.drawSVGpiano(firstNote, lastNote, pianoContainer,callback);

If you need a diferent event than "click" (e.g. a mouseover), define it like this:

callback.eventType = 'mouseover'; //ommiting this, assumes the calling event is a click.

If you want the piano smaller or bigger you can scale by setting a fifth argument. Example:

piano.drawSVGpiano( 60,
                    72,
                    document.getElementById('piano-container'),
                    function(e){alert('You clicked on note: ' + e.target.note)},
                    1.5
);

Recommend Projects