REACT-REDUX-WEBAUDIO
Web Audio API, integrated with react-redux
.
An event manager for the Attn: Do not use this library for processing audio events that require low latency.
Audio events are handled by React's internal reconciliation/diffing algos and therefore the latency, in terms of audio, is huge.
Demo & Examples
Live Demo To build the examples locally, clone/fork the repo and run:
cd examples
yarn /* OR */ npm install
npm start // this will start a webpack-dev-server and open the demo in your browser
Installation & Setup
npm i react-redux-webaudio
Basic Setup Example
/** * Imports */// Es6+ import;// Es5const RRWAEngine actionCreators webAudioReducer = ; /** * The root reducer used in the Redux store. */const rootReducer = ; /** * The application entry point. * Best to keep RRWAEngine at the top-level but technically it can be * anywhere, as long as it renders before any AudioEvents are emitted. */ReactDOM; /** * A container component that will render within the component tree of <App /> */const Container = ReactComponent;
Documentation
React-Redux-Webaudio consists of three modules:
- webAudioReducer – The Redux reducer.
- RRWAEngine –––––– The React component.
- actionCreators –––– The Redux action-creators (it's not required that these action creators are used).
Defining an Audio Event
Within the context of React-Redux-Webaudio, an AudioEvent
is a function that receives one or two arguments: a reference to an instance of window.AudioContext
, anda function that when called, returns that instance's currentTime
value.
; // a semi-practical example of what an AudioEvent could look like;
audioCtx.currentTime
may result in the time when the event was queued, not invoked. Instead, use the optional function getCurrentTime
, which will return the value of audioCtx.currentTime
when the AudioEvent
is actually invoked.
Note: Directly accessing Action Creators
emit
The emit
action-creator receives a single event or an array of events.
- If passed a single event, it will be pushed to a queue where it will be invoked in FIFO order.
- If passed an array of events, the array will be concatenated with the current event queue.
emit
action-creator:
Queueing an audio event without the included To use your own Redux action instead of the one created by emit, the action type must be 'QUEUE_EVENT'
and the action must have an event
key with a value of an AudioEvent
or Array<AudioEvent>
.
; store.dispatchaction; // more practically, include the action within a mapDispatchToProps function.
The RRWAEngine Component
Include the RRWAEngine component anywhere in your app (best to keep RRWAEngine at the top-level but technically it can be anywhere). It must be within scope of the Redux store containing the webAudioReducer.
Component { return <div> <RRWAEngine /> /* other components would go here */ </div> ; } ReactDOM;