Dennis
GitHub
commit
7465f2ea35
|
|
@ -22,6 +22,10 @@ h1 {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#console {
|
||||
overflow-y: scroll;
|
||||
max-height: 300px;
|
||||
}
|
||||
#note-render {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 2.6 KiB |
|
|
@ -1,7 +1,8 @@
|
|||
// prepare svg object for later use
|
||||
var keyboard = document.getElementById("piano");
|
||||
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() {
|
||||
svgDoc = keyboard.contentDocument;
|
||||
|
|
@ -12,39 +13,72 @@ function setKeyState(note, state) {
|
|||
let key = svgDoc.getElementById(String(note));
|
||||
if (state) {
|
||||
key.style.fill = "red";
|
||||
} else if (keysB.includes(note)) {
|
||||
} else if (black_keys.includes(note)) {
|
||||
key.style.fill = "black";
|
||||
} else {
|
||||
key.style.fill = "white";
|
||||
}
|
||||
}
|
||||
|
||||
// Check if browser supports MIDI
|
||||
if (!navigator.requestMIDIAccess) {
|
||||
console.log('WebMIDI is not supported in this browser. Or Site was not opened via HTTPS');
|
||||
}
|
||||
|
||||
// Attempt to establish a connection to the MIDI device
|
||||
navigator.requestMIDIAccess()
|
||||
.then(onMIDISuccess, onMIDIFailure);
|
||||
|
||||
function onMIDISuccess(midiAccess) {
|
||||
console.log(midiAccess);
|
||||
|
||||
for (var input of midiAccess.inputs.values()) {
|
||||
input.onmidimessage = getMIDIMessage;
|
||||
/**
|
||||
* Establishes MIDI connection
|
||||
*/
|
||||
function midiSetup() {
|
||||
// Check if MIDI connection is possible at all
|
||||
if (!navigator.requestMIDIAccess) {
|
||||
alert('WebMIDI is not supported in this browser. Or Site was not accessed via HTTPS');
|
||||
return
|
||||
}
|
||||
// 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() {
|
||||
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) {
|
||||
console.log("sugoma");
|
||||
var command = midiMessage.data[0];
|
||||
var note = midiMessage.data[1] - 20; // sorry midi standard
|
||||
var velocity = (midiMessage.data.length > 2) ? midiMessage.data[2] : 0;
|
||||
|
||||
|
||||
console.log(`MIDI{ command : ${command}, note : ${note}, velocity : ${velocity}}`);
|
||||
|
||||
if (command == 144){
|
||||
console.log(note);
|
||||
if (velocity == 0) {
|
||||
|
|
@ -55,4 +89,7 @@ function getMIDIMessage(midiMessage) {
|
|||
task.changeKeyState(note,true);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// code executed on include
|
||||
window.onload = (x) => { midiSetup(); }
|
||||
|
|
|
|||
41
html/debug.html
Normal file
41
html/debug.html
Normal 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>
|
||||
Loading…
Reference in a new issue