{"id":25341770,"url":"https://github.com/bsaphier/react-redux-webaudio","last_synced_at":"2025-10-29T12:30:55.780Z","repository":{"id":57343368,"uuid":"78156645","full_name":"bsaphier/react-redux-webaudio","owner":"bsaphier","description":"An event manager for the Web Audio API, integrated with react-redux.","archived":false,"fork":false,"pushed_at":"2018-09-21T19:55:57.000Z","size":1312,"stargazers_count":24,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-14T15:00:39.956Z","etag":null,"topics":["audio","react","react-redux","redux","web-audio","web-audio-api","webaudio-api"],"latest_commit_sha":null,"homepage":"https://bsaphier.github.io/react-redux-webaudio/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bsaphier.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-05T23:26:45.000Z","updated_at":"2022-09-20T10:28:59.000Z","dependencies_parsed_at":"2022-09-12T07:00:26.793Z","dependency_job_id":null,"html_url":"https://github.com/bsaphier/react-redux-webaudio","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bsaphier%2Freact-redux-webaudio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bsaphier%2Freact-redux-webaudio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bsaphier%2Freact-redux-webaudio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bsaphier%2Freact-redux-webaudio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bsaphier","download_url":"https://codeload.github.com/bsaphier/react-redux-webaudio/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238820388,"owners_count":19536170,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio","react","react-redux","redux","web-audio","web-audio-api","webaudio-api"],"created_at":"2025-02-14T09:40:32.511Z","updated_at":"2025-10-29T12:30:55.318Z","avatar_url":"https://github.com/bsaphier.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# REACT-REDUX-WEBAUDIO [![Build Status](https://travis-ci.org/bsaphier/react-redux-webaudio.svg?branch=master)](https://travis-ci.org/bsaphier/react-redux-webaudio) [![Coverage Status](https://coveralls.io/repos/github/bsaphier/react-redux-webaudio/badge.svg?branch=master)](https://coveralls.io/github/bsaphier/react-redux-webaudio) [![npm](https://img.shields.io/npm/v/react-redux-webaudio.svg)](https://www.npmjs.com/package/react-redux-webaudio)\n###### An event manager for the [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API), integrated with [`react-redux`](https://redux.js.org/basics/usagewithreact).\n\n\u003e #### \u003cspan style=\"color:red\"\u003e***Attn***\u003c/span\u003e: *Do not use this library for processing audio events that require low latency.*\n\u003e Audio events are handled by React's internal reconciliation/diffing algos and therefore the latency, in terms of audio, is **huge**.\n\n## Demo \u0026 Examples\n[Live Demo](https://bsaphier.github.io/react-redux-webaudio/examples/public/index.html)\nTo build the examples locally, clone/fork the repo and run:\n```\ncd examples\nyarn /* OR */ npm install\nnpm start   // this will start a webpack-dev-server and open the demo in your browser\n```\n\n## Installation \u0026 Setup\n```bash\nnpm i react-redux-webaudio\n```\n\n\n### Basic Setup Example\n```javascript\n/**\n * Imports\n */\n// Es6+ import\nimport { RRWAEngine, actionCreators, webAudioReducer } from 'react-redux-webaudio';\n// Es5\nconst { RRWAEngine, actionCreators, webAudioReducer } = require('react-redux-webaudio');\n\n\n\n/**\n * The root reducer used in the Redux store.\n */\nconst rootReducer = combineReducers({\n  // your other reducers...\n  webAudioReducer\n});\n\n\n\n/**\n * The application entry point.\n * Best to keep RRWAEngine at the top-level but technically it can be\n * anywhere, as long as it renders before any AudioEvents are emitted.\n */\nReactDOM.render(\n  \u003cProvider store={store}\u003e\n    \u003cdiv\u003e\n      \u003cRRWAEngine /\u003e\n      \u003cApp /\u003e\n    \u003c/div\u003e\n  \u003c/Provider\u003e,\n  document.getElementById('app')\n);\n\n\n\n/**\n * A container component that will render within the component tree of \u003cApp /\u003e\n */\nconst Container = connect(\n  state =\u003e state,\n  dispatch =\u003e ({ makeNoise: () =\u003e dispatch(actionCreators.emit(audioEvent)) })\n)(ReactComponent);\n```\n\n\n## Documentation\n\n**React-Redux-Webaudio** consists of three modules:\n- **webAudioReducer** – *The Redux reducer.*\n- **RRWAEngine** –––––– *The React component.*\n- **actionCreators** –––– *The Redux action-creators (it's not required that these action creators are used).*\n\n\n### Defining an Audio Event\nWithin 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.\n\n```ts\ntype AudioEvent = (audioCtx: AudioContext, getCurrentTime?: () =\u003e number) =\u003e void | any;\n\n// a semi-practical example of what an AudioEvent could look like\nlet audioEvent: AudioEvent = (audioCtx, getCurrentTime) =\u003e {\n  let oscillator: OscillatorNode = audioCtx.createOscillator();\n  let gainNode: GainNode = audioCtx.createGain();\n\n  oscillator.connect(gainNode);\n  gainNode.connect(audioCtx.destination);\n\n  oscillator.type = 'square';\n  oscillator.frequency.value = 100;\n  oscillator.start(getCurrentTime() + 500); // wait half a second, then make sound.\n\n  gainNode.gain.value = 0.1;\n};\n```\n###### ***Note***: Directly accessing `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.\n\n### Action Creators\n#### `emit`\nThe `emit` action-creator receives a single event or an array of events.\n- If passed a single event, it will be pushed to a queue where it will be invoked in FIFO order.\n- If passed an array of events, the array will be concatenated with the current event queue.\n\n#### Queueing an audio event without the included `emit` action-creator:\nTo 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\u003cAudioEvent\u003e`.\n\n```ts\ntype AudioEventAction = {\n  type: 'QUEUE_EVENT'\n  event: AudioEvent | AudioEvent[]\n}\n\nlet action: AudioEventAction = {\n  type: 'QUEUE_EVENT',\n  event: (audioCtx, currentTime) =\u003e {\n    // do something... anything.\n  }\n};\n\nstore.dispatch(action); // more practically, include the action within a mapDispatchToProps function.\n```\n\n\n### The RRWAEngine Component\nInclude 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.\n```js\nclass App extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cRRWAEngine /\u003e\n        {/* other components would go here */}\n      \u003c/div\u003e\n    );\n  }\n}\n\nReactDOM.render(\n  \u003cProvider store={ store }\u003e\n    \u003cApp /\u003e\n  \u003c/Provider\u003e,\n  document.getElementById('app')\n);\n```\n\n---\n\n###### *Pull Requests, github issues, comments, and questions are welcome* :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbsaphier%2Freact-redux-webaudio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbsaphier%2Freact-redux-webaudio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbsaphier%2Freact-redux-webaudio/lists"}