{"id":17914,"library":"redux-sounds","title":"Redux Sounds","description":"Redux Sounds is a Redux middleware designed to integrate sound effects into Redux applications by dispatching actions. It acts as a bridge between your Redux store and the Howler.js audio library, allowing developers to play sounds declaratively. The current stable version is 3.3.2. This package has a moderate release cadence, with significant updates historically aligning with major Howler.js versions and adding features like dynamic sound loading, playlists, and sprite support. Its key differentiator is the declarative Redux-first approach to sound management, abstracting away direct Howler.js API calls for common use cases, making it easier to manage sound logic within a predictable application state.","status":"active","version":"3.3.2","language":"javascript","source_language":"en","source_url":"https://github.com/joshwcomeau/redux-sounds","tags":["javascript","redux","middleware","redux-middleware","sound","howler","flux"],"install":[{"cmd":"npm install redux-sounds","lang":"bash","label":"npm"},{"cmd":"yarn add redux-sounds","lang":"bash","label":"yarn"},{"cmd":"pnpm add redux-sounds","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core audio engine for playing sounds; redux-sounds wraps and integrates with Howler.js.","package":"howler","optional":false}],"imports":[{"note":"This is a default export, not a named export. Ensure you import it directly.","wrong":"import { createSoundMiddleware } from 'redux-sounds';","symbol":"createSoundMiddleware","correct":"import createSoundMiddleware from 'redux-sounds';"},{"note":"While `soundData` isn't imported, it's a crucial configuration object. It should map sound IDs to file paths or Howler.js configuration objects.","symbol":"soundData","correct":"// The soundData object is typically defined by the user and passed to the middleware."}],"quickstart":{"code":"import { createStore, applyMiddleware } from 'redux';\nimport createSoundMiddleware from 'redux-sounds';\nimport { Howl } from 'howler'; // Required by redux-sounds, install if not present\n\n// 1. Define your sound data\nconst soundData = {\n  jump: '/path/to/jump.mp3',\n  gameOver: {\n    src: ['/path/to/game_over.ogg', '/path/to/game_over.mp3'],\n    loop: false,\n    volume: 0.8\n  },\n  backgroundMusic: {\n    src: ['/path/to/music.mp3'],\n    loop: true,\n    volume: 0.5\n  }\n};\n\n// 2. Create the sound middleware\nconst soundMiddleware = createSoundMiddleware(soundData, Howl);\n\n// 3. Create a simple reducer (for demonstration)\nconst initialState = { score: 0 };\nfunction appReducer(state = initialState, action) {\n  switch (action.type) {\n    case 'PLAYER_JUMP':\n      return { ...state, score: state.score + 10 };\n    case 'GAME_OVER':\n      return { ...state, score: 0 };\n    default:\n      return state;\n  }\n}\n\n// 4. Create the Redux store with the middleware\nconst store = createStore(\n  appReducer,\n  applyMiddleware(soundMiddleware)\n);\n\n// 5. Dispatch actions to play sounds\nstore.dispatch({\n  type: 'PLAYER_JUMP',\n  meta: { sound: 'jump' }\n});\n\nstore.dispatch({\n  type: 'GAME_OVER',\n  meta: {\n    sound: {\n      play: 'gameOver',\n      volume: 0.9 // Override default volume for this play\n    }\n  }\n});\n\nstore.dispatch({\n  type: 'START_MUSIC',\n  meta: { sound: { play: 'backgroundMusic', loop: true } }\n});\n\nconsole.log('Redux store configured and sounds dispatched.');\n// In a real app, Howler.js would handle sound playback in the browser/Node environment.\n","lang":"javascript","description":"This quickstart demonstrates setting up `redux-sounds` with a Redux store, defining `soundData`, and dispatching actions that trigger sound playback via the middleware."},"warnings":[{"fix":"Update `action.meta.sound` from a string like `'jumps.lowJump'` to an object like `{ fade: ['jumps.lowJump', 0, 1, 2] }` or `{ play: 'soundId' }` to use Howler methods explicitly.","message":"The structure of `action.meta.sound` for controlling Howler methods changed in v3.0.0. Instead of a direct string, it now expects an object to allow for more granular control over various Howler methods.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Change any `urls` property in your `soundData` configuration objects to `src` (e.g., `{ src: ['path/to/sound.mp3'] }`).","message":"The `urls` key in `soundData` was renamed to `src` in v2.0.0 to align with Howler.js v2 API changes.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Install `howler` via `npm install howler` or `yarn add howler` and ensure `Howl` is imported and passed: `createSoundMiddleware(soundData, Howl)`.","message":"To ensure `redux-sounds` works correctly, `howler.js` (specifically `Howl`) must be installed and passed as the second argument to `createSoundMiddleware`. This is not explicitly listed as a `peerDependency` but is a runtime requirement.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Refer to the documentation for sprite configuration, e.g., `{ urls: ['path/to/sprite.mp3'], sprite: { soundA: [0, 1000], soundB: [1500, 500] } }`.","message":"When using sound sprites, ensure the `sprite` object is correctly attached to your sound data. Incorrect configuration can lead to sounds not playing or playing incorrectly.","severity":"gotcha","affected_versions":">=1.1.0"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"fix":"Ensure `npm install howler` is run and `createSoundMiddleware(soundData, Howl)` is correctly configured, importing `Howl` from `howler`.","cause":"The `Howl` constructor from `howler.js` was not passed as the second argument to `createSoundMiddleware`, or `howler` is not installed.","error":"TypeError: Cannot read properties of undefined (reading 'play')"},{"fix":"Add a `meta` object to your action with a `sound` property, for example: `dispatch({ type: 'PLAY_BEEP', meta: { sound: 'beep' } })`.","cause":"An action was dispatched that passed through the sound middleware but lacked the `meta.sound` property, which is required for sound playback.","error":"Redux-sounds: `sound` meta property missing from action"},{"fix":"Double-check all sound paths in `soundData`. Ensure files exist at the specified locations and are accessible. Consider browser autoplay policies for initial sounds.","cause":"The audio file paths provided in `soundData` are incorrect, the files are missing, or there are browser limitations (e.g., autoplay without user interaction).","error":"Uncaught (in promise) DOMException: The element has no supported sources."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}