staff.js 🎼

A javascript library for displaying notes on a musical staff.

Inspired by the nslider in MaxMSP.

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)

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

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

Contributing

Any contributions you make are greatly appreciated. Any bugs and change requests are to be reported on the issues tab. If you don't like coding, you can contribute by becoming a sponsor.

Questions?

Please write to [email protected] or visit instrument.bible.