front update

client/app/composables/use-audio-context.ts

@@ -0,0 +1,59 @@
+import { useEventListener } from '@vueuse/core'
+
+export default function useAudioContext(audioTrack: Ref<MediaStreamTrack | undefined>) {
+  const ctx = new (window.AudioContext || window.webkitAudioContext)()
+
+  const stream = new MediaStream()
+
+  const sourceNode = shallowRef<MediaStreamAudioSourceNode>()
+  const gainNode = ctx.createGain()
+
+  let hackExecuted = false
+
+  watch(audioTrack, (track, prevTrack) => {
+    if (prevTrack)
+      stream.removeTrack(prevTrack)
+
+    if (!track)
+      return
+
+    stream.addTrack(track)
+
+    if (!hackExecuted) {
+      const audioEl = new Audio()
+      audioEl.srcObject = stream
+      audioEl.muted = true
+      hackExecuted = true
+    }
+
+    sourceNode.value = ctx.createMediaStreamSource(stream)
+
+    connect()
+  }, { immediate: true })
+
+  useEventListener(document, 'click', async () => {
+    if (ctx.state === 'suspended') {
+      await ctx.resume()
+    }
+
+    connect()
+  }, { once: true })
+
+  function connect() {
+    if (!sourceNode.value || ctx.state === 'suspended')
+      return
+
+    sourceNode.value.connect(gainNode)
+    gainNode.connect(ctx.destination)
+
+    ctx.resume()
+  }
+
+  function setGain(value: number) {
+    gainNode.gain.value = value
+  }
+
+  return {
+    setGain,
+  }
+}