@jasonfleischer/piano

    1.0.13 • Public • Published

    @jasonfleischer/piano

    A package for displaying notes, chords and scales on a keyboard view. Click HERE to see a demo

    Screenshot

    Installation

    $ npm i @jasonfleischer/piano

    Usage

    <div id="your_piano_id"></div>
    const pianoKit = require("@jasonfleischer/piano");
    const musicKit = require("@jasonfleischer/music-model-kit");
    musicKit.init();
    
    const pianoView = pianoKit({
    	id: 'your_piano_id',
    	range: {
    		min: 60, // midi value = C4 = middle C
    		max: 72  // midi value = C5
    	},
    	width: 325,
    	onClick: function(note, isOn) {
    		if(isOn) {
    			pianoView.drawNote(note);
    		} else {
    			pianoView.clearNote(note);
    		}
    	},
    	hover: true
    });
    
    // draw a note
    let midiValue = 45; // A2
    let note = musicKit.all_notes[midiValue];
    pianoView.drawNote(note);
    
    // draw a chord
    let midiValue = 60 // C4 = middle C
    let note = musicKit.all_notes[midiValue];
    let chord = new musicKit.Chord(note, musicKit.Chord.TYPE.minor);
    pianoView.drawChord(chord);
    
    // draw a scale
    let midiValue = 62 // D4
    let note = musicKit.all_notes[midiValue];
    let scale = new musicKit.Scale(note, musicKit.Scale.TYPE.Aeolian); // Dm scale
    pianoView.drawScale(scale);
    
    // clear all drawings
    pianoView.clear();
    
    // add a midi listener
    new musicKit.MidiListener(
    	function (midiValue, channel, velocity) { // note on
    		let note = musicKit.all_notes[midiValue];
    		pianoView.drawNote(note);
    	},
    	function (midiValue, channel, velocity) { // note off
    		let note = musicKit.all_notes[midiValue];
    		pianoView.clearNote(note);
    	});

    Click here for midi note references

    Sample Projects

    Install

    npm i @jasonfleischer/piano

    DownloadsWeekly Downloads

    22

    Version

    1.0.13

    License

    ISC

    Unpacked Size

    18.2 kB

    Total Files

    4

    Last publish

    Collaborators

    • jasonfleischer