@instrumentbible/staff.js

staff.js 🎼

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

DISCLAIMER: this library is a work in progress

Try the live demo.

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 staff.js library

<!-- import CSS -->
<link rel="stylesheet" href="css/staff.css" />

<!-- import JavaScript -->
<script src="js/JZZ.js"></script>
<script src="js/JZZ.input.Kbd.js"></script>
<script src="js/staff.js"></script>

add this HTML

<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)

// create a new staff
var myStaff = new Staff({
	clef:"treble",
	accidental:"flat"
})

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]);

OR

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

Color

set the color

myStaff.setColor('#FF0000');

get the color

myStaff.getColor();
// #FF0000

TO DO

• support for multiple staffs
• refactor ledger line code
• create a addNote() function
• add way to make note color different from staff color
• add key signatures
• add microtonal notation
• add way to change note stems
• add way to show note name in notehead
• add way to show a scale

Questions?

Please write to [e-mail] or visit instrument.bible.