MusicSite/test.html at main · MaxRR921/MusicSite · GitHub

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vexflow@4.2.2/build/cjs/vexflow.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/tonal/browser/tonal.min.js"></script>
    </head>
    <body>
        <div id="output"></div>

        <script>
            let midi = null; // global MIDIAccess object
            let pressedNotes = [];
            let vf, score, system;

            function onMIDISuccess(midiAccess) {
                console.log("MIDI ready!");
                midi = midiAccess;
                listInputsAndOutputs(midi);
                startLoggingMIDIInput(midi);
            }

            function onMIDIFailure(msg) {
                console.error(`Failed to get MIDI access - ${msg}`);
            }

            navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);

            function listInputsAndOutputs(midiAccess) {
                for (const entry of midiAccess.inputs) {
                    const input = entry[1];
                    console.log(entry[1], input);
                }

                for (const entry of midiAccess.outputs) {
                    const output = entry[1];
                }
            }

            function startLoggingMIDIInput(midiAccess) {
                midiAccess.inputs.forEach((entry) => {
                    entry.onmidimessage = handleMidiMessage;
                });
            }

            function parseMidiMessage(message) {
                return {
                    command: message.data[0] >> 4,
                    channel: message.data[0] & 0xf,
                    note: message.data[1],
                    velocity: message.data[2] / 127
                };
            }

            function handleMidiMessage(message) {
                const { command, channel, note, velocity } = parseMidiMessage(message);

                if (command === 8 || (command === 9 && velocity === 0)) {
                    onNoteOff(note);
                } else if (command === 9 && velocity > 0) {
                    onNote(note, velocity);
                }
            }

            function onNote(note, velocity) {
                const noteName = Tonal.Note.fromMidi(note);
                pressedNotes.push(noteName);
                console.log(`Note: ${noteName}, Velocity: ${velocity}`);
                detectChord();
            }

            function onNoteOff(note) {
                const noteName = Tonal.Note.fromMidi(note);
                const index = pressedNotes.indexOf(noteName);
                if (index > -1) {
                    pressedNotes.splice(index, 1);
                }
                detectChord();

            }

            function detectChord() {
                if (pressedNotes.length > 1) {
                    const sortedNotes = Tonal.Note.sortedNames(pressedNotes);
                    console.log(`Note: ${sortedNotes}`);
                    const detectedChords = Tonal.Chord.detect(sortedNotes);
                    console.log(`Detected Chord(s): ${detectedChords.length ? detectedChords : "No chord detected"}`);
                } else {
                    console.log('Not enough notes to form a chord');
                }
            }

         </script>
    </body>
</html>