Audio Input Composable (composables/audio-input.ts)

airi · apps/stage-web/src/composables/audio-input.ts · typescript · MIT
ui, voice, files, fw:vue, tag:composable, tag:web

Reactive Vue composable that lists microphone devices, manages permissions, and streams selected audio using VueUse, suitable for any web app needing user audio capture.

// Source: https://github.com/moeru-ai/airi | License: MIT | Copyright 2024-PRESENT Neko Ayaka
// Provided via justclaw.it.com; keep this notice with the code.
import { useDevicesList, useUserMedia } from '@vueuse/core'
import { computed, ref, watch } from 'vue'

export function useAudioInput() {
  const devices = useDevicesList({ constraints: { audio: true }, requestPermissions: false })

  const selectedAudioInputId = ref<string>(devices.audioInputs.value[0]?.deviceId || '')
  const selectedAudioInput = ref<MediaDeviceInfo>()
  const audioInputs = computed(() => devices.audioInputs.value)

  const constraints = ref<MediaStreamConstraints>({ audio: true })
  const media = useUserMedia({ constraints, autoSwitch: true, enabled: false })

  async function request() {
    if (devices.permissi

... (truncated -- full source via MCP)

See the full source, get the GitHub permalink, and search for more like it.

Get a free API key