useAudioContext

Browsers only let audio start after the user interacts with the page. Every audiocn-svelte Web Audio hook shares one AudioContext, and this hook resumes it on the first click, tap or key press.

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

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

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

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

Usage

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

	const audio = useAudioContext();
</script>

{#if audio.status === "suspended"}
	<Button onclick={audio.resume}>Enable audio</Button>
{/if}

Call it during component setup. status is a getter, so read it from the returned object instead of destructuring it.

Your own context

Call setAudioContext in a component's setup to make every hook inside that component use a context you created, for example one with a specific sample rate. It replaces audiocn's AudioContextProvider.

<script lang="ts">
	import { setAudioContext } from "#lib/hooks/use-audio-context.svelte.js";

	let { children } = $props();

	// AudioContext does not exist during server rendering.
	if (typeof AudioContext !== "undefined") {
		setAudioContext(new AudioContext({ sampleRate: 48_000 }));
	}
</script>

{@render children()}

Without it, hooks use the page-wide context from getSharedAudioContext(), which is null on the server.

Returns