Class: Keyboard

Keyboard(container, oopt)

Class representing an piano keyboard widget

Constructor

new Keyboard(container, oopt)

Parameters:
Name Type Attributes Description
container object DOM container for the widget.
o object <optional>
 Options.
Properties
Name Type Attributes Default Description
bottomNote number <optional>
 48 The bottom note (MIDI pitch) of the keyboard.
topNote number <optional>
 71 The top note (MIDI pitch) of the keyboard.
keyBorderColor string <optional>
 "#484848" The color of the border separating the keys.
blackKeyColor string <optional>
 "#484848" The color used for the black keys.
whiteKeyColor string <optional>
 "#fff" The color used for the white keys.
blackKeyActiveColor string <optional>
 "#888" The color used to represent an active black key.
whiteKeyActiveColor string <optional>
 "#333" The color used to represent an active white key.
blackKeyHeightAspect number <optional>
 0.6 The aspect ratio of black key height to white key height.
blackKeyWidthAspect number <optional>
 0.66 The aspect ratio of black key width to white key width.
orientation string <optional>
 "horizontal" The keyboard orientation. sible values are 'monophonic' (only one active note at a time), or 'polyphonic' (can have several active notes at a time).
isEditable boolean <optional>
 true Boolean specifying whether the keyboard is editable by the mouse or touch interactions. A non-editable keyboard may be used as a visual diagram, for example.
maxPolyphony number | string <optional>
 "no max" The maximum number of keys that can be active at the same time. Values can be a number, or "no max".
Implements:
  • Widget
Source:

Methods

_addSvgKey()

Adds an SVG element representing a key.
Source:

(private) _getKeyboardHeight()

Returns the height of the keyboard, taking orientation into account. If orientation is horizontal, height of the keyboard would equal height of the canvas. If orientation is vertical, height of the keyboard would equal the width of the canvas.
Source:
Throws:
if o.orientation is not one of the allowed values.
Type
Error

(private) _getKeyboardWidth()

Returns the width of the keyboard, taking orientation into account. If orientation is horizontal, width of the keyboard would equal width of the canvas. If orientation is vertical, width of the keyboard would equal the height of the canvas.
Source:
Throws:
if o.orientation is not one of the allowed values.
Type
Error

_getNewStateFromNewNote(newNote, isVelToggled) → {object}

Returns a newState object representing a new keyboard state based on a new note provided.
Parameters:
Name Type Description
newNote object A note object of format { pitch: number, vel: number }.
Properties
Name Type Description
pitch number
vel number
isVelToggled boolean A boolean indicating whether a non-zero vel of the same pitch will turn a note off if it is turned on.
Source:
Returns:
An object representing the new state.
Type
object

(private) _getNumKeys() → {number}

Returns the total number of keys on the keyboard.
Source:
Returns:
- Total number of keys.
Type
number

(private) _getNumWhiteKeys() → {number}

Returns the number of white keys on the keyboard.
Source:
Returns:
- Number of white keys.
Type
number

(private) _getPitchForKeyIdx(keyIdx) → {number}

Returns the MIDI note number for the given key number.
Parameters:
Name Type Description
keyIdx number The index of the key to be queried.
Source:
Returns:
- MIDI note number for the given key number
Type
number

(private) _getWhiteKeyWidth() → {number}

Returns the width of each white key in px.
Source:
Returns:
- Width of each white key in px.
Type
number

(private) _initHandlers()

Initializes mouse and touch event handlers.
Source:

(private) _initOptions()

Initialize the options
Source:

(private) _initState()

Initializes the state. State is represented as an array of active notes, each of which is an object { pitch, vel }, where pitch is MIDI pitch (0 - 127) and vel is MIDI velocity (0 - 127). A vel of 0 is reported once for each note-off event, and not reported on subsequent callback notifications.
Source:

(private) _initStateConstraints()

Initialize state constraints
Source:

(private) _initSvgEls()

Initialize the svg elements
Source:

(private) _isWhiteKey(note) → {boolean}

Returns true if the given MIDI note number is a white key on the piano.
Parameters:
Name Type Description
note number The MIDI note number for the given note.
Source:
Returns:
- True if the note is a white key, false if not.
Type
boolean

_removeSvgKey()

Removes an SVG element representing a key.
Source:

_setKeyAttributes()

Sets attributes for an SVG rectangle representing a key with the given index.
Source:

_touchKey()

Source:

(private) _update()

Updates (redraws) component based on state.
Source:

_updateSvgEls()

Updates the SVG elements. Adds or removes a number of SVG elements to match the current number of keys.
Source:

getActiveNotes() → {array}

Returns the currently active notes.
Source:
Returns:
- An array of active notes. Each element is a [pitch, vel] pair.
Type
array

getVal() → {object}

Returns the last note event.
Source:
Returns:
- An object representing the last note event that occured as {pitch, vel}
Type
object

setInternalVal(newNote, isVelToggled)

Sets the current keyboard state using an array of {pitch, val} objects. Same as setVal(), but will not cause an observer callback trigger.
Parameters:
Name Type Description
newNote array New value (array representing active notes with each entry in the form {pitch, val}).
isVelToggled boolean A boolean indicating whether a non-zero vel of the same pitch will turn a note off if it is turned on.
Source:

setOptions(oopt)

Sets the options.
Parameters:
Name Type Attributes Description
o object <optional>
 Options to set. See Keyboard#constructor for list of options.
Source:

setVal(newVal, isVelToggled)

Sets the current keyboard state using an array of {pitch, val} objects. Same as setInternalVal(), but will cause an observer callback trigger.
Parameters:
Name Type Description
newVal array New value (array representing active notes with each entry in the form {pitch, val}).
isVelToggled boolean A boolean indicating whether a non-zero vel of the same pitch will turn a note off if it is turned on.
Source: