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

Merge pull request #8 from krippix/feature/debug

Browse source 
Feature/debug
This commit is contained in:
Dennis 2023-06-17 20:35:23 +02:00 committed by GitHub
parent c1be07fb2f bc5b9ef931
commit 7465f2ea35
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 101 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
html/assets/css/base.css
View file

@ -22,6 +22,10 @@ h1 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
#console {
overflow-y: scroll;
max-height: 300px;
}
#note-render { #note-render {
display: inline-block; display: inline-block;
margin: 0 auto; margin: 0 auto;

BIN
html/assets/img/favicon.ico
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

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

@ -1,7 +1,8 @@
// prepare svg object for later use // prepare svg object for later use
var keyboard = document.getElementById("piano"); var keyboard = document.getElementById("piano");
var svgDoc; // loaded keyboard svg var svgDoc; // loaded keyboard svg
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] var midiAccess = null;
const black_keys = [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]
window.addEventListener("load", function() { window.addEventListener("load", function() {
svgDoc = keyboard.contentDocument; svgDoc = keyboard.contentDocument;
@ -12,39 +13,72 @@ function setKeyState(note, state) {
let key = svgDoc.getElementById(String(note)); let key = svgDoc.getElementById(String(note));
if (state) { if (state) {
key.style.fill = "red"; key.style.fill = "red";
} else if (keysB.includes(note)) { } else if (black_keys.includes(note)) {
key.style.fill = "black"; key.style.fill = "black";
} else { } else {
key.style.fill = "white"; key.style.fill = "white";
} }
} }
// Check if browser supports MIDI /**
if (!navigator.requestMIDIAccess) { * Establishes MIDI connection
console.log('WebMIDI is not supported in this browser. Or Site was not opened via HTTPS'); */
} function midiSetup() {
// Check if MIDI connection is possible at all
// Attempt to establish a connection to the MIDI device if (!navigator.requestMIDIAccess) {
navigator.requestMIDIAccess() alert('WebMIDI is not supported in this browser. Or Site was not accessed via HTTPS');
.then(onMIDISuccess, onMIDIFailure); return
function onMIDISuccess(midiAccess) {
console.log(midiAccess);
for (var input of midiAccess.inputs.values()) {
input.onmidimessage = getMIDIMessage;
} }
// Attempt to establish a MIDI connection. Handle success or failure
console.log("1231234");
window.navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);
console.log("4321321");
} }
/**
* Handle successful MIDI connection
* @param {*} midiAccess
*/
function onMIDISuccess(access) {
midiAccess = access;
console.log("access successful");
var input_list = [];
var iter = midiAccess.inputs.values();
for (let obj = iter.next(); !obj.done; obj = iter.next()) {
input_list.push(obj.value);
}
// Add event listener do all devices
for (var i = 0; i < input_list.length; i++) {
input_list[i].onmidimessage = getMIDIMessage;
console.log("amogus");
}
}
/**
* Handle MIDI failure
*/
function onMIDIFailure() { function onMIDIFailure() {
console.log('Could not access your MIDI devices.'); let message = "Failed to access your MIDI device";
console.log(message);
alert(message);
} }
/**
* Handle incoming MIDI Messages
* @param {*} midiMessage
*/
function getMIDIMessage(midiMessage) { function getMIDIMessage(midiMessage) {
console.log("sugoma");
var command = midiMessage.data[0]; var command = midiMessage.data[0];
var note = midiMessage.data[1] - 20; // sorry midi standard var note = midiMessage.data[1] - 20; // sorry midi standard
var velocity = (midiMessage.data.length > 2) ? midiMessage.data[2] : 0; var velocity = (midiMessage.data.length > 2) ? midiMessage.data[2] : 0;
console.log(`MIDI{ command : ${command}, note : ${note}, velocity : ${velocity}}`);
if (command == 144){ if (command == 144){
console.log(note); console.log(note);
if (velocity == 0) { if (velocity == 0) {
@ -55,4 +89,7 @@ function getMIDIMessage(midiMessage) {
task.changeKeyState(note,true); task.changeKeyState(note,true);
} }
} }
} }
// code executed on include
window.onload = (x) => { midiSetup(); }

41
html/debug.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<head>
<title>MidiTrainer - DEBUG</title>
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/base.css">
</head>
<body>
<div class="container">
<div id="note-render"></div>
<div class="checkboxes">
<input type="checkbox" id="naturals" checked><label for="naturals">Natural</label>
<input type="checkbox" id="sharps"><label for="sharps">Sharps</label>
<input type="checkbox" id="flats"><label for="flats">Flats</label>
<input type="checkbox" id="extended"><label for="extended">Extended</label>
</div>
<object id="piano" data="assets/img/piano-keyboard.svg" type="image/svg+xml" width="100%" type="image/svg+xml"></object>
</div>
<div class="container" id="console">
</div>
<script>
(function () {
var old = console.log;
var logger = document.getElementById('console');
console.log = function (message) {
if (typeof message == 'object') {
logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : message) + '<br />';
} else {
logger.innerHTML += message + '<br />';
}
}
})();
console.log("Debug console started...");
</script>
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.0.3/build/cjs/vexflow.js"></script>
<script src="assets/scripts/map.js"></script>
<script src="assets/scripts/render.js"></script>
<script src="assets/scripts/midi.js"></script>
<script src="assets/scripts/practice.js"></script>
</body>