Listen to midi

src/jsMain/kotlin/nl/astraeus/vst/chip/Main.kt

@@ -3,10 +3,13 @@ package nl.astraeus.vst.chip
 import kotlinx.browser.document
 import nl.astraeus.komp.Komponent
 import nl.astraeus.vst.chip.channel.Broadcaster
+import nl.astraeus.vst.chip.midi.Midi
 import nl.astraeus.vst.chip.view.MainView
 
 fun main() {
   Komponent.create(document.body!!, MainView)
 
   Broadcaster.start()
+
+  Midi.start()
 }

src/jsMain/kotlin/nl/astraeus/vst/chip/midi/Midi.kt

@@ -0,0 +1,89 @@
+package nl.astraeus.vst.chip.midi
+
+import kotlinx.browser.window
+import nl.astraeus.vst.chip.audio.VstChipWorklet
+import nl.astraeus.vst.chip.view.MainView
+
+external class MIDIInput {
+  val connection: String
+  val id: String
+  val manufacturer: String
+  val name: String
+  val state: String
+  val type: String
+  val version: String
+  var onmidimessage: (dynamic) -> Unit
+  var onstatechange: (dynamic) -> Unit
+
+  fun open()
+  fun close()
+}
+
+external class MIDIOutput {
+  val connection: String
+  val id: String
+  val manufacturer: String
+  val name: String
+  val state: String
+  val type: String
+  val version: String
+
+  fun send(message: dynamic)
+}
+
+object Midi {
+  var inputs = mutableListOf<MIDIInput>()
+  var outputs = mutableListOf<MIDIInput>()
+  var currentInput: MIDIInput? = null
+
+  fun start() {
+    val navigator = window.navigator.asDynamic()
+
+    navigator.requestMIDIAccess().then(
+      { midiAccess ->
+        val inp = midiAccess.inputs
+        val outp = midiAccess.outputs
+
+        console.log("Midi inputs:", inputs)
+        console.log("Midi outputs:", outputs)
+
+        inp.forEach() { input ->
+          console.log("Midi input:", input)
+          inputs.add(input)
+          console.log("Name: ${(input as? MIDIInput)?.name}")
+        }
+
+        outp.forEach() { output ->
+          console.log("Midi output:", output)
+          outputs.add(output)
+        }
+
+        MainView.requestUpdate()
+      },
+      { e ->
+        println("Failed to get MIDI access - $e")
+      }
+    )
+  }
+
+  fun setInput(input: MIDIInput) {
+    console.log("Setting input", input)
+    currentInput?.close()
+
+    currentInput = input
+
+    currentInput?.onstatechange = { message ->
+      console.log("State change:", message)
+    }
+
+    currentInput?.onmidimessage = { message ->
+      console.log("Midi message:", message)
+      VstChipWorklet.postMessage(
+        message.data
+      )
+    }
+
+    currentInput?.open()
+  }
+
+}

src/jsMain/kotlin/nl/astraeus/vst/chip/view/MainView.kt

@@ -7,14 +7,19 @@ import daw.style.CssId
 import daw.style.CssName
 import daw.style.hover
 import kotlinx.html.FlowContent
+import kotlinx.html.P
 import kotlinx.html.a
+import kotlinx.html.br
 import kotlinx.html.classes
 import kotlinx.html.div
 import kotlinx.html.h1
 import kotlinx.html.hr
+import kotlinx.html.js.onChangeFunction
 import kotlinx.html.js.onClickFunction
 import kotlinx.html.js.onMouseDownFunction
 import kotlinx.html.js.onMouseUpFunction
+import kotlinx.html.option
+import kotlinx.html.select
 import kotlinx.html.span
 import nl.astraeus.css.properties.BoxSizing
 import nl.astraeus.css.properties.FontWeight
@@ -27,7 +32,9 @@ import nl.astraeus.komp.Komponent
 import nl.astraeus.vst.Note
 import nl.astraeus.vst.chip.audio.VstChipWorklet
 import nl.astraeus.vst.chip.channel.Broadcaster
+import nl.astraeus.vst.chip.midi.Midi
 import org.khronos.webgl.Int32Array
+import org.w3c.dom.HTMLSelectElement
 
 object MainView : Komponent() {
   private var messages: MutableList<String> = ArrayList()
@@ -68,31 +75,27 @@ object MainView : Komponent() {
         }
       }
       div {
-        a {
-          href = "#"
-          +"Send broadcast test message"
-          onClickFunction = {
-            Broadcaster.send("Test message")
-          }
-        }
-      }
-      div {
-        a {
-          href = "#"
-          +"Note on"
-          onClickFunction = {
-            VstChipWorklet.postMessage("test_on")
-          }
-        }
-        a {
-          href = "#"
-          +"Note off"
-          onClickFunction = {
-            VstChipWorklet.postMessage("test_off")
+        + "Midi input: "
+        select {
+          for (mi in Midi.inputs) {
+            option {
+              +mi.name
+              value = mi.id
+            }
+          }
+
+          onChangeFunction = { event ->
+            val target = event.target as HTMLSelectElement
+            val selected = Midi.inputs.find { it.id == target.value }
+            if (selected != null) {
+              Midi.setInput(selected)
+            }
           }
         }
       }
 
+      br {}
+
       hr {}
 
       repeat(9) {