useMicrophone

$ pnpm dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/use-microphone.json

$ npx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/use-microphone.json

$ yarn dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/use-microphone.json

$ bunx --bun shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/use-microphone.json

Usage

<script lang="ts">
	import { Button } from "#lib/components/ui/button/index.js";
	import { useAudioAnalyser } from "#lib/hooks/use-audio-analyser.svelte.js";
	import { useMicrophone } from "#lib/hooks/use-microphone.svelte.js";

	let { deviceId }: { deviceId: string | null } = $props();

	const microphone = useMicrophone(() => ({ deviceId }));
	const analyser = useAudioAnalyser(() => microphone.stream);
</script>

<Button onclick={microphone.start}>Start</Button>

Call it during component setup. Pass the options as a getter, as above, so a new deviceId reopens the stream. stream, status and error are getters: read them from the returned object, and pass () => microphone.stream to other hooks. start() and stop() override enabled until it changes.

Echo cancellation, noise suppression and automatic gain control are off by default. Browsers turn them on for calls, but they change the level a meter shows. Turn them on when you want call-style audio.

Options

Returns