A collection of audio and music hooks
npm install react-audio-mixerDo 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!
``jsx`
function App() {
return (
echoCancellation
noiseSuppression
/>
listen="mic"
gain={0.5}
/>
/>
);
}
All nodes can be provided the following:
* name?: Name of the node or group of nodeslisten?
* : Name node(s) to take data from. Not available on input nodesonNode?
* : AudioNode callbackonError?
* : 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
* : numberstartTime
* : numberlinearRampToValueAtTime
* :type
* : 'linearRamp'value
* : numberendTime
* : numberexponentialRampToValueAtTime
* :type
* : 'exponentialRamp'value
* : numberendTime
* : numbersetTargetAtTime
* :type
* : 'setTarget'target
* : numberstartTime
* : numbertimeConstant
* : numbersetValueCurveAtTime
* :type
* : 'setValueCurve'values
* : number[] | Float32ArraystartTime
* : numberduration
* : number
Creates an audio context for this module
* latencyHint?: Context latency hintsampleRate?
* : Context sample rate
Returns the context and status of the AudioProvider
Requests and gathers available audio media devices.
`jsx`
const [devices, ready] = useAudioDevices();
Requests and gathers available input audio media devices.
`jsx`
const [devices, ready] = useAudioInputDevices();
Requests and gathers available output audio media devices.
`jsx`
const [devices, ready] = useAudioOutputDevices();
Requests a stream via MediaStreamConstraints
`jsx`
const constraints = useMemo(() => ({ audio: true, video: false }))
const stream = useStream(constraints);
Scopes children in a new group
* children?: Audio NodesinputName?
* (default: input): input node nameoutputName?
* (default: output): putput node name
* deviceId?: Media device idechoCancellation?
* : Echo cancellationnoiseSuppression?
* : Noise suppressionautoGainControl?
* : Auto gain controlonStream?
* : MediaStream handler
* stream: MediaProvider
* type?: Oscillator typefrequency
* : FrequencyfrequencySequence?
* : AudioParamSequencedetune?
* : detunedetuneSequence?
* : AudioParamSequencestart?
* : Start timeend?
* : End timeonEnded?
* : Ended handler
* deviceId?: Media device id
* stream: MediaStream
A node just for pivoting on.
* gain: Gain valuegainSequence?
* : AudioParamSequence
* type: frequency or waveformfftSize?
* : FFT sizeinterval?
* : Interval between updatesmin?
* : Decibels minimummax?
* : Decibels maximumfloatBuffer?
* : Update with Float32ArrayonUpdate
* : Update data handler
* limit?: Volume limitpadding?
* : Gap paddingfftSize?
* : FFT sizeinterval?
* : Interval between updatesmin?
* : Decibels minimummax?
* : Decibels maximumonUpdate
* : Update data handler
* noteList?: Note listlimit?
* : Volume limitpadding?
* : Gap paddingfftSize?
* : FFT sizeinterval?
* : Interval between updatesmin?
* : Decibels minimummax?
* : Decibels maximumonUpdate
* : Update data handler
* type: node typenode
* : 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 (
listen={listen}
type="node"
node={node}
onError={onError}
/>
);
}
`
`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 (
listen={listen}
gain={min}
gainSequence={gainSequence}
/>
);
}
`
`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 && (
frequency={frequency}
start={start}
end={end}
onEnded={updateState}
/>
);
}
``
Copyright (c) 2021, Michael Szmadzinski. (MIT License)
[mdn-audio-param]: https://developer.mozilla.org/en-US/docs/Web/API/AudioParam