{"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.","language":"javascript","status":"active","last_verified":"Thu Apr 23","install":{"commands":["npm install redux-sounds"],"cli":null},"imports":["import createSoundMiddleware from 'redux-sounds';","// The soundData object is typically defined by the user and passed to the middleware."],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}