# react-audio-mixer

> A collection of audio and music hooks

Latest version **0.4.0** (published 2023-11-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-audio-mixer
pnpm add react-audio-mixer
yarn add react-audio-mixer
bun add react-audio-mixer
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2023-11-26 |
| First published | 2021-07-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 67.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Michael Szmadzinski |
| Maintainers | smujmaiku |

## Links

- npm: https://www.npmjs.com/package/react-audio-mixer
- Repository: https://github.com/smujmaiku/react-audio-mixer
- Homepage: https://github.com/smujmaiku/react-audio-mixer#readme
- Issues: https://github.com/smujmaiku/react-audio-mixer/issues
- npm.io page: https://npm.io/package/react-audio-mixer

## Dependencies (1)

- [make-list-provider](https://npm.io/package/make-list-provider.md) ^0.4.1

## Recent versions

- 0.4.0 (latest) — 2023-11-26
- 0.3.6 — 2021-10-12
- 0.3.5 — 2021-10-11
- 0.3.4 — 2021-10-06
- 0.3.3 — 2021-10-06
- 0.3.2 — 2021-09-22
- 0.3.1 — 2021-09-21
- 0.3.0 — 2021-09-05
- 0.2.3 — 2021-07-31
- 0.2.2 — 2021-07-31
- 0.2.1 — 2021-07-30
- 0.2.0 — 2021-07-29
- 0.1.9 — 2021-07-29
- 0.1.8 — 2021-07-29
- 0.1.7 — 2021-07-27
- … 7 more at https://npm.io/package/react-audio-mixer/versions

## README

# 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

```jsx
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][mdn-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.

```jsx
const [devices, ready] = useAudioDevices();
```

### useAudioInputDevices

Requests and gathers available input audio media devices.

```jsx
const [devices, ready] = useAudioInputDevices();
```

### useAudioOutputDevices

Requests and gathers available output audio media devices.

```jsx
const [devices, ready] = useAudioOutputDevices();
```

### useStream

Requests a stream via MediaStreamConstraints

```jsx
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

```jsx
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

```jsx
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

```jsx
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}
		/>
	);
}
```

## License

Copyright (c) 2021, Michael Szmadzinski. (MIT License)

[mdn-audio-param]: https://developer.mozilla.org/en-US/docs/Web/API/AudioParam

---
_Source: https://npm.io/package/react-audio-mixer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._