Adds ability for user to select MIDI channel

README.md

@@ -4,5 +4,4 @@ A quick preset selector for the Oberheim Matrix 1000
 
 # TODO
 
-* Add support for channel selection
 * Save last configuration and patch selection in local browser cache

src/App.tsx

@@ -9,6 +9,7 @@ function App() {
   const [patchNumber, setPatchNumber] = useState(0)
   const [midiDeviceMap, setMidiDeviceMap] = useState<Map<string, Output>>(new Map())
   const [selectedMidiDevice, setSelectedMidiDevice] = useState<string>()
+  const [selectedMidiChannel, setSelectedMidiChannel] = useState<number>(1)
 
   function connect() {
     WebMidi.enable()
@@ -55,7 +56,7 @@ function App() {
   function sendPatchNumber() {
     if(selectedMidiDevice) {
       let outputDevice = midiDeviceMap.get(selectedMidiDevice)
-      let midiChannel = 2
+      let midiChannel = selectedMidiChannel
       if(outputDevice) {
         outputDevice.sendControlChange(1, 127, {channels: midiChannel})
         pause(50)
@@ -93,13 +94,27 @@ function App() {
     return options
   }
 
+  function midiChannelOptions() {
+    let channelList = makeList(16).map((num) => {
+      return <option value={num+1} key={'channelkey'+(num+1)}>{num+1}</option>
+    })
+    channelList.unshift(<option key={"channelnochoice"}>--</option>)
+    return channelList
+
+  }
+
   function handleMidiDeviceSelect(e: ChangeEvent<HTMLSelectElement>) {
     setSelectedMidiDevice(e.target.value)
   }
 
+  function handleMidiChannelSelect(e: ChangeEvent<HTMLSelectElement>) {
+    setSelectedMidiChannel(parseInt(e.target.value))
+  }
+
   return (
     <>
       <select onChange={handleMidiDeviceSelect}>{midiDeviceOptions()}</select>
+      <select onChange={handleMidiChannelSelect}>{midiChannelOptions()}</select>
       <div>
         PATCH:
       </div>