@instrumentbible/staff.js
v1.0.1
Published
A javascript library for displaying notes on a musical staff.
Downloads
8
Readme
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 [email protected] or visit instrument.bible.