P5js-any-midi-input
From Digipool-Wiki
Simple p5js-MIDI-Example
This code recognises which MIDI device is connected.
To begin with, the browser (Chrome) must be given permission to connect to the MIDI device. (Sometimes the program has to be started twice before it works).
The code then automatically recognises which button or controller is being operated on the MIDI device and displays the corresponding channel and its current value. The circle is also moved up and down as a visualisation.
Open in Editor — LINK
skatsh.js
// MIDI-any-input
// by Olaf Val
// based on an example by "Mister Bomb"
// Based on "midi.js"
let x = 100;
function setup() {
createCanvas(400, 400);
fill(255);
ellipseMode(CENTER);
}
function draw() {
background(20);
text("Connected with: " + manufacturer + " " + name, 10, 20 * 1);
for(let f = 0; f < 100; f++){
if (channel == f) {
text("Channel: " + f + " = " + value, 10, 20 * 2);
x = map(value, 0, 127, 0, height - 25);
}
}
ellipse(width / 2, (height- 25) - x, 50);
}
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
<script src="midi.js"></script>
</body>
</html>
midi.js
let channel, value, on, manufacturer, name;
if (navigator.requestMIDIAccess) {
console.log('This browser supports WebMIDI!');
} else {
console.log('WebMIDI is not supported in this browser.');
}
navigator.requestMIDIAccess()
.then(onMIDISuccess, onMIDIFailure);
function onMIDISuccess(midiAccess) {
console.log(midiAccess);
var inputs = midiAccess.inputs;
var outputs = midiAccess.outputs;
}
function onMIDIFailure() {
console.log('Could not access your MIDI devices.');
}
function onMIDISuccess(midiAccess) {
for (var input of midiAccess.inputs.values()) {
input.onmidimessage = getMIDIMessage;
console.log(input);
manufacturer = input.manufacturer;
name = input.name;
}
}
function getMIDIMessage(midiMessage) {
value = midiMessage.data[2];
channel = midiMessage.data[1];
on = midiMessage.data[0];
}
style.css
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
