useMixer

Mixer state with no audio attached: gain, mute, solo, pan and monitor per channel, plus a master.

2 min read · 303 words

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

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

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

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

Usage

import { useMixer } from "#lib/hooks/use-mixer.svelte.js";

const mixer = useMixer({
	channels: [{ id: "mic" }, { id: "music", gainDb: -12 }],
	persistKey: "my-app-mixer",
});

mixer.setGain("mic", -3);
mixer.setSolo("music", true, { exclusive: true });
mixer.isAudible("mic"); // false while music is soloed

useMixer only holds state. Connect it to sound with useWebAudioMixer, or read mixer.state and send it to your own engine.

Call it during component setup. state, channels and master are getters, so read them from the returned object; the functions read the current state too. Bind a control to a channel with a function binding:

{#each mixer.channels as channel (channel.id)}
	<Fader
		aria-label="{channel.id} volume"
		bind:value={() => channel.gainDb, (gainDb) => mixer.setGain(channel.id, gainDb)}
	/>
{/each}

Options

Prop	Type	Default
`channels` Initial channels. Missing fields get defaults.	`(Partial<MixerChannelState> & { id })[]`	`[]`
`master`	`Partial<MixerMasterState>`	`{ gainDb: 0, muted: false }`
`state` Controlled state.	`MixerState`	—
`onStateChange` Called after every change.	`(state) => void`	—
`persistKey` Save state to localStorage under this key.	`string`	—

channels and master set the initial state only. state, onStateChange and persistKey stay live when you pass the options as a getter, so a controlled mixer looks like this:

let mixerState = $state.raw<MixerState>(initialState);

const mixer = useMixer(() => ({
	state: mixerState,
	onStateChange: (next) => (mixerState = next),
}));

A channel is { id, gainDb, muted, solo, pan, monitor }. pan runs from −1 to 1.

Returns

Prop	Type	Default
`state / channels / master` Current state.	`MixerState`	—
`channel`	`(id) => MixerChannelState \| undefined`	—
`setGain / setMuted / setPan / setMonitor`	`(id, value) => void`	—
`setSolo` exclusive un-solos every other channel.	`(id, solo, { exclusive? }) => void`	—
`setMasterGain / setMasterMuted`	`(value) => void`	—
`isAudible` False when muted, or when another channel is soloed.	`(id) => boolean`	—
`isDimmed` True when silenced only by another channel's solo.	`(id) => boolean`	—
`addChannel / removeChannel`	`(channel \| id) => void`	—
`reset` Back to the initial state.	`() => void`	—

mixerReducer and isChannelAudible are exported for use outside Svelte.