-
Notifications
You must be signed in to change notification settings - Fork 5
/
midi-checker.tsx
70 lines (54 loc) · 1.67 KB
/
midi-checker.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import type { Input, Output } from "webmidi";
import { useEffect, useState } from "react";
import { WebMidi } from "webmidi";
export default function UtilitiesMidiChecker () {
const [webMidiEnabled, setWebMidiEnabled] = useState(false);
useEffect(() => {
console.group("[midi-checker][useEffect]");
console.info("-> Starting WebMidi...");
WebMidi
.enable()
.then (() => {
console.info("<- Successfully enabled !");
console.groupEnd();
// Update WebMidi state.
setWebMidiEnabled(true);
})
.catch (err => {
console.error("<- An error was thrown.", err);
console.groupEnd();
alert("An error happenned, check console.");
});
}, []);
const [availableInputs, setAvailableInputs] = useState<Input[]>([]);
const [availableOutputs, setAvailableOutputs] = useState<Output[]>([]);
/** Refresh available devices when WebMidi enabled. */
useEffect(() => {
refreshAvailableDevices();
}, [webMidiEnabled]);
/** Function to refresh 'availableDevices' state */
const refreshAvailableDevices = () => {
if (!webMidiEnabled) return;
// Get the devices.
const { inputs, outputs } = WebMidi;
// Store them to states.
setAvailableInputs(inputs);
setAvailableOutputs(outputs);
// Debug in console.
console.group("[refreshAvailableDevices] Refreshed states.");
console.info("Inputs", inputs);
console.info("Outputs", outputs);
console.groupEnd();
};
return (
<div>
<h1>MIDI Checker</h1>
{!webMidiEnabled && (
<div>
<p>Loading WebMidi...</p>
</div>
)}
<h2>Send MIDI</h2>
</div>
);
}