lauchmelder/MIDI_practice
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implemented note display

Browse source
This commit is contained in:
krippix 2023-06-04 23:32:08 +02:00
parent 4fb4a58a1d
commit f46710ef6c
4 changed files with 112 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

3
html/assets/scripts/midi.js
View file

@ -1,7 +1,8 @@
// prepare svg object for later use
var keyboard = document.getElementById("piano");
var svgDoc; // loaded keyboard svg
var keysB = [2,5,7,10,12,14,17,19,22,24,26,29,31,34,36,38,41,43,46,48,50,53,55,58,60,62,65,67,70,72,74,77,79,82,84,86]
const keysB = [2,5,7,10,12,14,17,19,22,24,26,29,31,34,36,38,41,43,46,48,50,53,55,58,60,62,65,67,70,72,74,77,79,82,84,86]
const keyTo = {}
window.addEventListener("load", function() {
svgDoc = keyboard.contentDocument;

99
html/assets/scripts/render.js Normal file
View file

@ -0,0 +1,99 @@
const { Renderer, Stave, StaveNote, Voice, Formatter, TickContext } = Vex.Flow;
class Notation {
constructor() {
// Create an SVG renderer and attach it to the DIV element
this.div = document.getElementById("note-render");
this.renderer = new Renderer(this.div, Renderer.Backends.SVG);
// Configure the rendering context.
this.renderer.resize(321, 500);
this.ctx = this.renderer.getContext();
// Create the staves
this.topStaff = new Vex.Flow.Stave(20, 100, 300);
this.bottomStaff = new Vex.Flow.Stave(20, 200, 300);
// add clefs
this.topStaff.addClef('treble');
this.bottomStaff.addClef('bass');
// add brace and line
this.brace = new Vex.Flow.StaveConnector(this.topStaff, this.bottomStaff).setType(3); // 3 = brace
this.lineLeft = new Vex.Flow.StaveConnector(this.topStaff, this.bottomStaff).setType(1);
this.lineRight = new Vex.Flow.StaveConnector(this.topStaff, this.bottomStaff).setType(6);
// create voice
this.voiceTop = new Vex.Flow.Voice({num_beats: 4, beat_value: 4, resolution: Vex.Flow.RESOLUTION});
this.voiceBottom = new Vex.Flow.Voice({num_beats: 4, beat_value: 4, resolution: Vex.Flow.RESOLUTION});
// init notelist
this.notesTop = [];
this.notesBottom = [];
this.draw();
}
/**
* Takes list of notes ex: [{clef: "bass/treble", keys: ["c/4,"e/4"], duration: "w"},{clef: "bass/treble", keys: ["c/4,"e/4"], duration: "w"}]
* @param {*} notes
*/
set_notes(to_set) {
this.voiceTop.tickables = [];
this.voiceBottom.tickables = [];
this.notesTop = [];
this.notesBottom = [];
to_set.forEach( note => {
if (note.clef == "treble") {
console.log("amogus");
this.notesTop.push(new Vex.Flow.StaveNote(note));
} else {
console.log("amogus");
this.notesBottom.push(new Vex.Flow.StaveNote(note));
}
});
for (let note of this.notesTop) {
note.x_shift = 100;
}
for (let note of this.notesBottom) {
note.x_shift = 100;
}
this.voiceTop.addTickables(this.notesTop);
this.voiceBottom.addTickables(this.notesBottom);
this.draw();
}
draw() {
// draw background
this.topStaff.setContext(this.ctx).draw();
this.bottomStaff.setContext(this.ctx).draw();
this.brace.setContext(this.ctx).draw();
this.lineLeft.setContext(this.ctx).draw();
this.lineRight.setContext(this.ctx).draw();
// draw notes
if (this.notesTop.length != 0) {
new Vex.Flow.Formatter().joinVoices([this.voiceTop]).format([this.voiceTop], 500);
this.voiceTop.draw(this.ctx, this.topStaff);
}
if (this.notesBottom.length != 0) {
new Vex.Flow.Formatter().joinVoices([this.voiceBottom]).format([this.voiceBottom], 500);
this.voiceBottom.draw(this.ctx, this.bottomStaff);
}
}
}
class Noteset {
// syntax for notes: https://github.com/0xfe/vexflow/blob/master/src/tables.ts
constructor(clef, keys) {
this.clef = clef;
this.keys = keys;
this.duration = "w";
}
}
notator = new Notation();
notator.set_notes([new Noteset("treble",["c/5","c/6"]),new Noteset("bass",["c/3"])]);