fix color in midi_visualizer

javascript/app.js

@@ -104,6 +104,7 @@ class MidiVisualizer extends HTMLElement{
  this.midiEvents = [];
  this.activeNotes = [];
  this.midiTimes = [];
+ this.patches = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
  this.wrapper = null;
  this.svg = null;
  this.timeLine = null;
@@ -145,17 +146,20 @@ class MidiVisualizer extends HTMLElement{
  this.wrapper = wrapper;
  this.svg = svg;
  this.timeLine= timeLine;
+ for(let i = 0; i <= 128 ; i++){
+ this.colorMap.set(i, HSVtoRGB(i / 129, 1, 1))
+ }
+ console.log(this.colorMap)
  this.setPlayTime(0);
  }
 
- clearMidiEvents(keepColor=false){
+ clearMidiEvents(){
  this.pause()
  this.midiEvents = [];
  this.activeNotes = [];
  this.midiTimes = [];
+ this.patches = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
  this.t1 = 0
- if (!keepColor)
- this.colorMap.clear()
  this.setPlayTime(0);
  this.totalTimeMs = 0;
  this.playTimeMs = 0
@@ -201,6 +205,9 @@ class MidiVisualizer extends HTMLElement{
  midiEvent.push(rect)
  this.setPlayTime(t);
  this.wrapper.scrollTo(this.svgWidth - this.wrapper.offsetWidth, 0)
+ }else if(midiEvent[0] === "patch_change"){
+ let channel = midiEvent[3]
+ this.patches[channel] = midiEvent[4]
  }
  this.midiEvents.push(midiEvent);
  this.svg.style.width = `${this.svgWidth}px`;
@@ -209,7 +216,11 @@ class MidiVisualizer extends HTMLElement{
  }
 
  getColor(track, channel){
- let key = `${track},${channel}`;
+ let key = this.patches[channel];
+ if( channel === 9){
+ // drum
+ key = 128;
+ }
  let color = this.colorMap.get(key);
  if(!!color){
  return color;