MDN audio worklet example. Application

Author: turansky

tests/worklets/mdn-audioworklet-example/src/commonMain/kotlin/mdn/audioworklet/example/App.kt

@@ -1,5 +1,123 @@
 package mdn.audioworklet.example
 
-fun main() {
-    // TODO
+import web.audio.*
+import web.dom.ElementId
+import web.dom.clickEvent
+import web.dom.document
+import web.dom.inputEvent
+import web.events.addHandler
+import web.events.once
+import web.html.HTMLButtonElement
+import web.html.HTMLInputElement
+import web.window.loadEvent
+import web.window.window
+import web.worklets.addModule
+
+var _audioContext: AudioContext? = null
+val audioContext: AudioContext
+    get() = _audioContext ?: error("AudioContext not initialized")
+
+lateinit var hissGainRange: HTMLInputElement
+lateinit var oscGainRange: HTMLInputElement
+lateinit var gainNode: GainNode
+lateinit var hissGainParam: AudioParam
+
+suspend fun main() {
+    window.loadEvent.once()
+
+    document.getElementById(ElementId("toggle"))
+        .let { it as HTMLButtonElement }
+        .clickEvent.addHandler { suspendRun(::toggleSound) }
+
+    hissGainRange = document.getElementById(ElementId("hiss-gain")) as HTMLInputElement
+    oscGainRange = document.getElementById(ElementId("osc-gain")) as HTMLInputElement
+
+    hissGainRange.inputEvent.addHandler { event ->
+        val value = event.currentTarget.valueAsNumber.toFloat()
+        hissGainParam.setValueAtTime(value, audioContext.currentTime)
+    }
+
+    oscGainRange.inputEvent.addHandler { event ->
+        val value = event.currentTarget.valueAsNumber.toFloat()
+        gainNode.gain.setValueAtTime(value, audioContext.currentTime)
+    }
+
+    hissGainRange.disabled = true
+    oscGainRange.disabled = true
+}
+
+suspend fun createHissProcessor(): AudioWorkletNode? {
+    if (_audioContext == null) {
+        try {
+            _audioContext = AudioContext()
+        } catch (_: Exception) {
+            console.log("** Error: Unable to create audio context")
+            return null
+        }
+    }
+
+    var processorNode: AudioWorkletNode
+
+    try {
+        processorNode = AudioWorkletNode(audioContext, "hiss-generator")
+    } catch (_: Exception) {
+        try {
+            console.log("adding...")
+            audioContext.audioWorklet.addModule(HissGeneratorWorkletModule)
+            processorNode = AudioWorkletNode(audioContext, "hiss-generator")
+        } catch (e: Exception) {
+            console.log("** Error: Unable to create worklet node: $e")
+            return null
+        }
+    }
+
+    audioContext.resume()
+    return processorNode
+}
+
+suspend fun audioDemoStart() {
+    val hissGenNode = createHissProcessor()
+    if (hissGenNode == null) {
+        console.log("** Error: unable to create hiss processor")
+        return
+    }
+    val soundSource = OscillatorNode(audioContext)
+    gainNode = audioContext.createGain()
+
+    // Configure the oscillator node
+
+    soundSource.type = OscillatorType.square
+    soundSource.frequency.setValueAtTime(440f, audioContext.currentTime) // (A4)
+
+    // Configure the gain for the oscillator
+
+    gainNode.gain.setValueAtTime(oscGainRange.valueAsNumber.toFloat(), audioContext.currentTime)
+
+    // Connect and start
+
+    soundSource
+        .connect(gainNode)
+        .connect(hissGenNode)
+        .connect(audioContext.destination)
+    soundSource.start()
+
+    // Get access to the worklet's gain parameter
+
+    hissGainParam = hissGenNode.parameters.get(GAIN)!!
+    hissGainParam.setValueAtTime(hissGainRange.valueAsNumber.toFloat(), audioContext.currentTime)
+}
+
+suspend fun toggleSound() {
+    if (_audioContext == null) {
+        audioDemoStart()
+
+        hissGainRange.disabled = false
+        oscGainRange.disabled = false
+    } else {
+        hissGainRange.disabled = true
+        oscGainRange.disabled = true
+
+        audioContext.close()
+        _audioContext = null
+    }
 }

tests/worklets/mdn-audioworklet-example/src/commonMain/kotlin/mdn/audioworklet/example/Coroutines.kt

@@ -0,0 +1,12 @@
+package mdn.audioworklet.example
+
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.launch
+import kotlin.coroutines.EmptyCoroutineContext
+
+fun suspendRun(
+    block: suspend () -> Unit,
+) {
+    CoroutineScope(EmptyCoroutineContext)
+        .launch { block() }
+}