javascript - p5.jsピアノ楽器のコードを調べる

Question

p5.js で鍵盤楽器を作成していますが、コードを調べるのに助けが必要です。まず、自分の楽器用のサステインペダルを作ろうとしていて、オンとオフを切り替えることはできますが、オフのままではありません。

次に、楽器に MIDI 機能をインポートしたいと考えています。現在、プログラムは実行されていますが、キャンバスには何も表示されないことを考えると、MIDI 入力作成用のコードがオフになっているように感じます。

ページへのリンクは次のとおりです — https://editor.p5js.org/dragonballskymaster/sketches/mvb1oV2gF

まだまだ初心者なのでよろしくお願いします！！:) 喜んでお手伝いいただける場合は、さらに説明が必要な場合はお知らせください。今のところ、波形ボタンと音量ボタンは無視してください。webMIDI を index.html にインポートしたので—</p>

<script src="https://cdn.jsdelivr.net/npm/webmidi"></script>

これがメインのコードです—</p>

//constants
var osc;
var keyWidth;
var numberOfKeys = 88;
var sel;

////
//Setting up MIDI
////

WebMidi.enable(function(err) { //check if WebMidi.js is enabled

  if (err) {
    console.log("WebMidi could not be enabled.", err);
  } else {
    console.log("WebMidi enabled!");
  }


  //name our visible MIDI input and output ports
  console.log("---");
  console.log("Inputs Ports: ");
  for (i = 0; i < WebMidi.inputs.length; i++) {
    console.log(i + ": " + WebMidi.inputs[i].name);
  }

  console.log("---");
  console.log("Output Ports: ");
  for (i = 0; i < WebMidi.outputs.length; i++) {
    console.log(i + ": " + WebMidi.outputs[i].name);

  }

  //Choose an input port
  inputSoftware = WebMidi.inputs[0];
  //The 0 value is the first value in the array
  //Meaning that we are going to use the first MIDI input we see
  //This can be changed to a different number,
  //or given a string to select a specific port

  ///
  //listen to all incoming "note on" input events
  inputSoftware.addListener('noteon', "all",
    function(e) {
      //Show what we are receiving
      console.log("Received 'noteon' message (" + e.note.name + e.note.octave + ") " + e.note.number + ".");

      //This will happen any time any note on message is received
      //But you can specify particular notes that you want to respond to:

      //If the incoming note is a "D" in any octave, then...
      if (e.note.name == "D") {
        console.log("A D note has been received, any octave");
        
      }
      //Or you can specify the note
      if ((e.note.name + e.note.octave) == "C4") {
        console.log("A C4 note has been received, specifically");

      }
      //Or use the MIDI note number instead
      if (e.note.number == 64) {
        console.log("Detected MIDI note number 64 turned ON");

        //displayText="Note number 64 is on";
      }
    }
  );

  //The note off functionality will need its own event listener
  //You don't need to pair every single note on with a note off

  inputSoftware.addListener('noteoff', "all",
    function(e) {
      //Show what we are receiving
      console.log("Received 'noteoff' message (" + e.note.name + e.note.octave + ") " + e.note.number + ".");

      if (e.note.number == 64) {
        console.log("Detected MIDI note number 64 turned OFF");

        //displayText="Note number 64 is off";
      }
    }
  );
  //
  //end of MIDI setup
  //
}





//waveform return
//function getOsc(waveType) {
//osc = new p5.Oscillator();
//osc.setType(waveType);
//osc.amp(1);
//return osc;
//}

//setup black keys
function getBlackKeys(notes) {
  var blackKeys = [];
  var blackKeysRecipie = [1 + 10, 1, 4, 6, 9, 11];
  for (var i = 0; i < numberOfKeys; i++) {
    if (blackKeysRecipie.indexOf(i % 12) > -1) {
      blackKeys.push(i);
    }
  }
  return blackKeys;
}

//function playWithTouch() {
// osc.freq(440 * (2 ** (1 / 12)) ** Math.floor(map(mouseX, 0, windowWidth, 3, numberOfKeys + 3)));
//}

//font variables
let titleFont;
let subFont;

//sound variables
let A0;
let A0s;
let B0;
let C1;
let C1s;
let D1;
let D1s;
let E1;
let F1;
let F1s;
let G1;

//sustain setup
let playMode = 'sustain';

function preload() {

  //load notes
  A0 = loadSound('A0!!.wav');
  A0s = loadSound('A0#.wav');
  B0 = loadSound('B1!!.wav');
  C1 = loadSound('C1!!.wav');
  C1s = loadSound('C1#!!.wav');
  D1 = loadSound('D1!!.wav');
  D1s = loadSound('D1s!!.wav');
  E1 = loadSound('E1!!.wav');
  F1 = loadSound('F1!!.wav');
  F1s = loadSound('F1#!!.wav');
  G1 = loadSound('G1!!.wav');


  //load fonts
  titleFont = loadFont('Riana Star Display.ttf');
  subFont = loadFont('Riana Star.ttf');

}

//volume variable
let volumeSlider;

function setup() {

  //create waveform selector
  sel = createSelect();
  sel.position(80, 380);
  sel.option("sine");
  sel.option("triangle");
  sel.option("square");
  sel.option("sawtooth");
  sel.changed(getWave);

  //create keywidth size
  keyWidth = windowWidth / numberOfKeys;
  blackKeys = getBlackKeys(numberOfKeys);

  //create volume slider
  volumeSlider = createSlider(0, 255, 100);
  volumeSlider.position(80, 440);
  volumeSlider.style('width', '80px');

  //create canvas
  createCanvas(windowWidth, windowHeight);
  background(252, 197, 198);

  //create and fill keys
  for (var i = 0; i < numberOfKeys * 2; i++) {
    fill(197, 213, 252);
    stroke(100, 100, 100);
    strokeWeight(2);
    if (blackKeys.indexOf(i) > -1) {
      rect(i * keyWidth, 200, keyWidth, 50);
      fill(0);
    }
    rect(i * keyWidth, 150, keyWidth, 150);
  }

  //waveform selector setup 2
  osc = getOsc("sine");
}

function draw() {
  //set up boxes
  fill(197, 213, 252);
  rect(70, 350, 100, 120);

  //sustain box
  rect(710, 320, 70, 30);

  fill(184, 149, 114);
  rect(710, 350, 35, 25);
  rect(745, 350, 35, 25);

  //playWithTouch();

  //title
  smooth();
  fill(255);
  stroke(0);
  strokeWeight(8);
  textFont(titleFont);
  textSize(100);
  text("old apartment piano", 60, 90);

  //control panel
  strokeWeight(4);
  fill(255);
  textFont(subFont);
  textSize(28);

  text("waveform", 80, 372);
  text("volume", 80, 430);

  //sustain pedal
  stroke(255);
  strokeWeight(3);
  fill(0);
  textSize(28);
  text("sustain", 716, 340)

  strokeWeight(0);
  textSize(23)
  text("on  |", 718, 368);

  textSize(23)
  text("off", 753, 368);

}

//create waveform selector 
function getWave() {
  var item = sel.value();
  osc.setType(item);
}

//function mousePressed() {
// if (mouseY < 300 && mouseY > 150 && mouseX < 716 && mouseX > 770 && mouseY < 320 && mouseY > 250) {
//  osc.start();
// }// else {
//osc.playMode('sustain');
//}
//}

//play keys

function mousePressed() {

  //A0
  if (mouseY < 300 && mouseY > 150 && mouseX < 8.8) {
    A0.play();
    console.log("A0.wav");
  }

  //A0#
  if (mouseY < 300 && mouseY > 150 && mouseX > 8.8 && mouseX < 17.6) {
    A0s.play();
    console.log("A0#.wav");
  }

  //B0
  if (mouseY < 300 && mouseY > 150 && mouseX > 17.6 && mouseX < 26.4) {
    B0.play();
    console.log("B0.wav");
  }

  //C1
  if (mouseY < 300 && mouseY > 150 && mouseX > 26.4 && mouseX < 35.2) {
    C1.play();
    console.log("C1");
  }

  //C1#
  if (mouseY < 300 && mouseY > 150 && mouseX > 35.2 && mouseX < 44) {
    C1s.play();
    console.log("C1#");
  }

  //D1
  if (mouseY < 300 && mouseY > 150 && mouseX > 44 && mouseX < 52) {
    D1.play();
    console.log("D1");
  }

  //D1#
  if (mouseY < 300 && mouseY > 150 && mouseX > 52 && mouseX < 61.5) {
    D1s.play();
    console.log("D1#");
  }

  //E1
  if (mouseY < 300 && mouseY > 150 && mouseX > 61.5 && mouseX < 69.9) {
    E1.play();
    console.log("E1");
  }

  //F1
  if (mouseY < 300 && mouseY > 150 && mouseX > 69.9 && mouseX < 78.7) {
    F1.play();
    console.log("F1");
  }

  //F1#
  if (mouseY < 300 && mouseY > 150 && mouseX > 78.7 && mouseX < 87.4) {
    F1s.play();
    console.log("F1#");
  }

  //G1
  if (mouseY < 300 && mouseY > 150 && mouseX > 87.4 && mouseX < 95.9) {
    G1.play();
    console.log("G1");
  }

  //sustain on
  if (mouseX > 710 && mouseX < 745 && mouseY > 350 && mouseY < 375) {
    mouseReleased = false;
    console.log("sustain on");
  }


  // rect(710, 350, 35, 25);
  //rect(745, 350, 35, 25);

  //sustain off
  if (mouseX > 745 && mouseX < 780 && mouseY > 350 && mouseY < 375) {

    mouseReleased = !mouseReleased;

    A0.stop();
    A0s.stop();
    B0.stop();
    C1.stop();
    C1s.stop();
    D1.stop();
    D1s.stop();
    E1.stop();
    F1.stop();
    F1s.stop();
    G1.stop();

    console.log("sustain off");
  }
}


function mouseReleased() {
  A0.stop();
  A0s.stop();
  B0.stop();
  C1.stop();
  C1s.stop();
  D1.stop();
  D1s.stop();
  E1.stop();
  F1.stop();
  F1s.stop();
  G1.stop();

  if (mouseX > 745 && mouseX < 780 && mouseY > 350 && mouseY < 375) {

    //A0
    if (mouseY < 300 && mouseY > 150 && mouseX < 8.8) {
      A0.play();
      console.log("A0.wav");
    }

    //A0#
    if (mouseY < 300 && mouseY > 150 && mouseX > 8.8 && mouseX < 17.6) {
      A0s.stop();
      console.log("A0#.wav");
    }

    //B0
    if (mouseY < 300 && mouseY > 150 && mouseX > 17.6 && mouseX < 26.4) {
      B0.stop();
      console.log("B0.wav");
    }

    //C1
    if (mouseY < 300 && mouseY > 150 && mouseX > 26.4 && mouseX < 35.2) {
      C1.stop();
      console.log("C1");
    }

    //C1#
    if (mouseY < 300 && mouseY > 150 && mouseX > 35.2 && mouseX < 44) {
      C1s.stop();
      console.log("C1#");
    }

    //D1
    if (mouseY < 300 && mouseY > 150 && mouseX > 44 && mouseX < 52) {
      D1.stop();
      console.log("D1");
    }

    //D1#
    if (mouseY < 300 && mouseY > 150 && mouseX > 52 && mouseX < 61.5) {
      D1s.stop();
      console.log("D1#");
    }

    //E1
    if (mouseY < 300 && mouseY > 150 && mouseX > 61.5 && mouseX < 69.9) {
      E1.stop();
      console.log("E1");
    }

    //F1
    if (mouseY < 300 && mouseY > 150 && mouseX > 69.9 && mouseX < 78.7) {
      F1.stop();
      console.log("F1");
    }

    //F1#
    if (mouseY < 300 && mouseY > 150 && mouseX > 78.7 && mouseX < 87.4) {
      F1s.stop();
      console.log("F1#");
    }

    //G1
    if (mouseY < 300 && mouseY > 150 && mouseX > 87.4 && mouseX < 95.9) {
      G1.stop();
      console.log("G1");
    }

    console.log("sustain off");
  }

}

//set up volume slider
function volumeInput() {
  let i = this.id;
  console.log(this.id + " " + this.value());
  players[i].volume.rampTo(this.value());
}

すみません、コードがめちゃくちゃです。どんな助けも大好きです！

javascript - p5.j​​sピアノ楽器のコードを調べる

1 に答える 1

Related

Reference

javascript - p5.jsピアノ楽器のコードを調べる