timcosgrove.github.io/midi2binary2dec.html at main · timcosgrove/timcosgrove.github.io · 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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Midi notes to bitmask to base 10</title>
  <style>
    .readable {
      font-size: 24px;
    }
    .strong {
      font-weight: 700;
      font-size: 30px;
    }
    .warning {
      display:none;
      font-weight: 700;
      font-size: 30px;
      color: darkred;
    }
    .warning.visible {
      display: block;
    }
    .values {
      padding: 20px;
      background-color: pink;
    }
    pre {
      padding: 20px;
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <p id="apiWarning" class="warning">This browser does not support WEB MIDI API. Please use a <a href="https://caniuse.com/midi">browser that supports Web MIDI API</a>.</p>
  <p id="failureWarning" class="warning">Failed to connect to MIDI. Please try again. Please make sure you are using a <a href="https://caniuse.com/midi">browser that supports Web MIDI API</a>.</p>
  <p id="devicesWarning" class="warning">No MIDI devices found. Please connect a MIDI device to continue.</p>
  <div class="values">
    <div class="readable strong" id="reversebinary">base 10 bitmask: 0 <-- feed this to binary scale ops</div>
    <div class="readable" id="binary">reverse bitmask: R000000000000 <-- you could use this but too long for patterns</div>
    <div class="readable" id="activeNoteNumbers">active notes:</div>
    <div class="readable" id="pitchClasses">pitch classes:</div>
  </div>
  <p id="instructions">This is intended for use with <a href="https://llllllll.co/t/teletype-4-0-0-beta-2-new-june-20-ready-for-testing/45871" target="_blank">Teletype 4.0's</a> binary scale ops.
    If you have a MIDI keyboard connected, you should be able to play notes and generate the appropriate bitmask for those notes.<br /><br />
  For example, if you play a C major chord, the base 10 bitmask should show "145". You could then do something like this in Teletype:
<pre>
  N.BX 0 0 145;
  JF.NOTE N.BX 0 RND 7 V 5;
</pre>
This would assign the C major chord "scale" to scale index 1, and then play a random note in the chord over two octaves on Just Friends.
</p>
<p>Note that you can get this information entirely from Teletype, as well, if you plug a MIDI keyboard into it, using a scene like this:</p>
<pre>
  MIDI 2 DECIMAL

  DECIMAL: %1
  RBINARY: R%R2


  #1
  L 1 MI.NL: $ 2

  #2
  A BSET A % MI.N 12
  PRINT 1 A
  PRINT 2 A

  #3
  L 1 MI.OL: $ 4

  #4
  A BCLR A % MI.O 12
  PRINT 1 A
  PRINT 2 A
</pre>


<script>
  var midi, data;
// request MIDI access
if (navigator.requestMIDIAccess) {
    navigator.requestMIDIAccess({
        sysex: false
    }).then(onMIDISuccess, onMIDIFailure);
} else {
    noMidiAPIMessage();
}

// midi functions
function onMIDISuccess(midiAccess) {


    // when we get a succesful response, run this code
    midi = midiAccess; // this is our raw MIDI data, inputs, outputs, and sysex status
    midi.onstatechange = onStateChange;
    onStateChange(null);

}

function onStateChange(e) {
  // Hide the MIDI devices warning.
  document.getElementById('devicesWarning').setAttribute('class', 'warning');

  var hasDevices = false;
  var inputs = midi.inputs.values();
  // loop over all available inputs and listen for any MIDI input
  for (var input = inputs.next(); input && !input.done; input = inputs.next()) {
      // each time there is a midi message call the onMIDIMessage function
      input.value.onmidimessage = onMIDIMessage;
      hasDevices = true;
  }

  if (!hasDevices) {
    noMidiDevicesMessage();
  }
}

function onMIDIFailure(error) {
    // when we get a failed response, run this code
    noMidiFailureMessage();
}
var activeNotes = {};
function onMIDIMessage(message) {
    data = message.data; // this gives us our [command/channel, note, velocity] data.
    cmd = data[0] >> 4;
    channel = data[0] & 0xf;
    type = data[0] & 0xf0;
    note = data[1];
    switch (type) {
      case 144:
        activeNotes[note] = true;
        updateNotes();
        break;
      case 128:
        activeNotes[note] = false;
        updateNotes();
        break;
    }
}
function updateNotes() {
  let actualNotes = [];
  let actualPitchIndexes = [];
  let bitMask = [];
  let pitchClasses = [
    'C',
    'C#',
    'D',
    'D#',
    'E',
    'F',
    'F#',
    'G',
    'G#',
    'A',
    'A#',
    'B',
  ];
  let activePitchClasses = [];
  for (const note in activeNotes) {
    if (activeNotes[note] == true) {
      actualNotes.push(note);
      actualNotes.sort(function(a, b) {
        return a - b;
      });
      actualPitchIndexes.push(note % 12);
      actualPitchIndexes.sort(function(a, b) {
        return a - b;
      });
    }
  }
  actualNotes = actualNotes.filter(onlyUnique);
  for (var i = 0; i < 12; i++) {
    bitMask.push(actualPitchIndexes.includes(i) ? 1 : 0);
    if (actualPitchIndexes.includes(i)) {
      activePitchClasses.push(pitchClasses[i]);
    }
  }
  console.log
  document.getElementById('activeNoteNumbers').innerHTML = "active notes: " + actualNotes.join(", ");
  document.getElementById('pitchClasses').innerHTML = "pitch classes: " + activePitchClasses.join(", ");
  document.getElementById('binary').innerHTML = "reverse bitmask: R" + bitMask.join('') + " <-- you could use this but too long for patterns";
  document.getElementById('reversebinary').innerHTML = "base 10 bitmask: " + parseInt(bitMask.reverse().join(''), 2)  + " <-- feed this to binary scale ops";
}
function onlyUnique(value, index, self) {
  return self.indexOf(value) === index;
}
function noMidiAPIMessage() {
  document.getElementById('apiWarning').setAttribute('class', 'warning visible');
}
function noMidiFailureMessage() {
  document.getElementById('failureWarning').setAttribute('class', 'warning visible');
}
function noMidiDevicesMessage() {
  document.getElementById('devicesWarning').setAttribute('class', 'warning visible');
}
</script>
</body>
</html>