我正在 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());
}
抱歉，代码有点乱。任何帮助都是受欢迎的！
