Staff.js

A javascript library for displaying notes on a musical staff. Inspired by the nslider in MaxMSP.

Features

• show notes on a musical staff
• touch on staff to update the note
• change clef (treble, alto, tenor, bass, grand)
• change accidental sharp or flat

Setup

import styles

<link rel="stylesheet" href="css/staff.css" />

import scripts

<script src="js/JZZ.js"></script>
<script src="js/JZZ.input.Kbd.js"></script>
<script src="js/staff.js"></script>

add a HTML element

<div id="myStaff"></div>

now you can use the library to create a staff

// these are the options
var options = {
	id: "myStaff",
	clef: "treble",
	accidental: "flat",
	color: "#FF0000",
	scroll: false,
}

// create a new staff
var myStaff = new Staff(options)

clef

change the clef

myStaff.setClef('bass');

get the clef

myStaff.getClef();
// bass

Notes

Set the current note

myStaff.setNote(88);

Get current note

myStaff.getNote('myStaff');
// 68

change the accidental

myStaff.setAccidental('sharp');

Chords

To display multiple notes, setNote() with an array.

myStaff.setNote([45,55,62]);

Color

// set the color
myStaff.setColor('#FF0000');

// get the color
myStaff.getColor();
// #FF0000