React-audio-mixer NPM

React Audio Mixer

Do you need audio options in React without the fuss of dealing with contexts? Are you trying to mix a bunch of AudioNode objects together but it's hard? Do you have lots of componants trying to work together with audioNodes?

Use react-audio-mixer to make music in your React apps!

Usage

function App() {
	return (
		<AudioProvider>
			<MicrophoneNode
				name="mic"
				echoCancellation
				noiseSuppression
			/>
			<GainNode
				name="gain"
				listen="mic"
				gain={0.5}
			/>
			<SpeakerNode
				listen="gain"
			/>
		</AudioProvider>
	);
}

All nodes can be provided the following:

name?: Name of the node or group of nodes
listen?: Name node(s) to take data from. Not available on input nodes
onNode?: AudioNode callback
onError?: Error handler

Some node attributes can take sequence values that correspond with AudioParam. These are provided as an Array AudioParamSequence in any comination of the following tuples:

setValueAtTime:
- type: 'setValue'
- value: number
- startTime: number
linearRampToValueAtTime:
- type: 'linearRamp'
- value: number
- endTime: number
exponentialRampToValueAtTime:
- type: 'exponentialRamp'
- value: number
- endTime: number
setTargetAtTime:
- type: 'setTarget'
- target: number
- startTime: number
- timeConstant: number
setValueCurveAtTime:
- type: 'setValueCurve'
- values: number[] | Float32Array
- startTime: number
- duration: number

AudioProvider

Creates an audio context for this module

latencyHint?: Context latency hint
sampleRate?: Context sample rate

useAudio default

Returns the context and status of the AudioProvider

useAudioDevices

Requests and gathers available audio media devices.

const [devices, ready] = useAudioDevices();

useAudioInputDevices

Requests and gathers available input audio media devices.

const [devices, ready] = useAudioInputDevices();

useAudioOutputDevices

Requests and gathers available output audio media devices.

const [devices, ready] = useAudioOutputDevices();

useStream

Requests a stream via MediaStreamConstraints

const constraints = useMemo(() => ({ audio: true, video: false }))
const stream = useStream(constraints);

Group Node

Scopes children in a new group

children?: Audio Nodes
inputName? (default: input): input node name
outputName? (default: output): putput node name

Microphone Node

deviceId?: Media device id
echoCancellation?: Echo cancellation
noiseSuppression?: Noise suppression
autoGainControl?: Auto gain control
onStream?: MediaStream handler

StreamIn Node

stream: MediaProvider

Oscillator Node

type?: Oscillator type
frequency: Frequency
frequencySequence?: AudioParamSequence
detune?: detune
detuneSequence?: AudioParamSequence
start?: Start time
end?: End time
onEnded?: Ended handler

Speaker Node

deviceId?: Media device id

StreamOut Node

stream: MediaStream

Null Node

A node just for pivoting on.

Gain Node

gain: Gain value
gainSequence?: AudioParamSequence

Analyser Node

type: frequency or waveform
fftSize?: FFT size
interval?: Interval between updates
min?: Decibels minimum
max?: Decibels maximum
floatBuffer?: Update with Float32Array
onUpdate: Update data handler

HzAnalyser Node

limit?: Volume limit
padding?: Gap padding
fftSize?: FFT size
interval?: Interval between updates
min?: Decibels minimum
max?: Decibels maximum
onUpdate: Update data handler

NoteAnalyser Node

noteList?: Note list
limit?: Volume limit
padding?: Gap padding
fftSize?: FFT size
interval?: Interval between updates
min?: Decibels minimum
max?: Decibels maximum
onUpdate: Update data handler

Custom Node

type: node type
node: AudioNode

import useAudio, { CustomNode } from 'react-audio-mixer';

function SomeNode(props) {
	const { name, listen, onError } = props;
	const { context, ready } = useAudio();

	const node = useMemo(() => {
		try {
			context.createDynamicsCompressor();
		catch(e) {}
	}, [context]);

	// Do something with your node

	return (
		<CustomNode
			name={name}
			listen={listen}
			type="node"
			node={node}
			onError={onError}
		/>
	);
}

Examples

PulseGain Node

function PulseGain(props) {
	const { name, listen, min = 0, max = 1, interval = 2000 } = props;
	const { context } = useAudio();

	const [gainSequence, setGainSequence] = useState();

	useEffect(() => {
		const update = () => {
			const now = context.currentTime;
			setGainSequence([
				['linearRamp', max, interval / 2000 + now],
				['linearRamp', min, interval / 1000 + now],
			]);
		};

		update();
		const timer = setInterval(update, interval);

		return () => {
			clearInterval(timer);
		};
	}, [context, min, max, interval]);

	return (
		<GainNode
			name={name}
			listen={listen}
			gain={min}
			gainSequence={gainSequence}
		/>
	);
}

RandomBeeps Node

function RandomBeeps(props) {
	const { name, min = 256, max = 512, length = 500, margin = 500 } = props;
	const { context } = useAudio();

	const [[frequency, start, end], setState] = useState([0, 0, 0]);

	const updateState = useCallback((offset = 0) => {
		const now = context.currentTime + offset;

		setState([
			min + (max - min) * Math.random(),
			margin / 1000 + now,
			(margin + length) / 1000 + now,
		]);
	}, [context, min, max, length, margin]);

	useEffect(() => {
		updateState(-margin / 1000);
	}, [margin, updateState]);

	return frequency && (
		<OscillatorNode
			name={name}
			frequency={frequency}
			start={start}
			end={end}
			onEnded={updateState}
		/>
	);
}