diff --git a/src/components/MidiComponent.js b/src/components/MidiComponent.js
index ac6496d..b461924 100644
--- a/src/components/MidiComponent.js
+++ b/src/components/MidiComponent.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState, useEffect} from 'react';
// this will pass true to enable SYSEX
@@ -63,31 +63,34 @@ function loadSysex(input) {
reader.readAsArrayBuffer(file);
}
+// converts SYSEX file to the dump format the system uses (and the implementation refers to)
function dumpBufferFromSysexFile(array) {
// remove the header and footer bytes
- let dump = array.slice(5, -1);
- console.log(dump);
+ let dump = array.slice(5, -1);
// quick test for verification;
if (dump[0] !== 0x00) {
console.log("incorrect byte");
return;
}
- console.log(dump);
+ console.log('trimmed file', dump);
+ // convert from 291 bytes to 254 (ala the implementation)
dump = dump.filter(
function(num, index, array) {
return index % 8;
}
);
- console.log(dump);
+ console.log('dump format', dump);
return dump;
}
+// load a SYSEX File into the MIDI component
function LoadSYSEXFile (props) {
const fileInput = React.useRef();
- const [data, updateData] = React.useState(new Uint8ClampedArray());
+ const [data, updateData] = useState(new Uint8ClampedArray());
- React.useEffect(() => {
+ // make sure data is updating correctly
+ useEffect(() => {
console.log(data);
}, [data]);
@@ -97,7 +100,9 @@ function LoadSYSEXFile (props) {
if (loadSysex(fileInput) !== null) {
let reader = new FileReader();
reader.onload = (e) => {
+ // here we load the file into a clamped byte array and trim and convert it to the dump format (see implementation)
let l_data = new Uint8ClampedArray(e.target.result);
+ // updata state with dump format
updateData(dumpBufferFromSysexFile(l_data));
}
reader.readAsArrayBuffer(fileInput.current.files[0]);
@@ -133,18 +138,21 @@ function LoadSYSEXFile (props) {
-
+
);
}
function MIDIComponent () {
- // request midi access
- navigator.requestMIDIAccess({sysex: true}).then(onMIDISuccess, onMIDIFailure);
- const [loadedFile, loadFile] = React.useState(null);
+ const [loadedFile, loadFile] = useState(null);
- React.useEffect(() => {
+ // request midi access
+ useEffect(() => {
+ navigator.requestMIDIAccess({sysex: true}).then(onMIDISuccess, onMIDIFailure);
+ }, []);
+
+ useEffect(() => {
console.log(loadedFile);
}, [loadedFile]);