Justen Justen - 2 months ago 12
React JSX Question

Can't play sound files

Trying to play sound files using https://github.com/joshwcomeau/redux-sounds but I can't get it working. Below is the relevant code I used to set it up. I don't know if webpack isn't loading them correctly or something else. How would I know if they are being loaded properly? Any ideas on how to get this to work? No console errors aside from chrome saying it can't decode the audio, but that is apparently and bug and doesn't present when I try it in Firefox.

configureStore.js

//...
import soundsMiddleware from 'redux-sounds';
const soundsData = {
barks: {
urls: ['data/barkSprite.wav', 'data/barkSprite.mp3'],
sprite: {
shortBark: [0, 500],
longBark: [600, 1250]
}
}
};
const loadedSoundsMiddleware = soundsMiddleware(soundsData);
//...
export default function configureStore(initialState) {
const store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(thunk, router, logger, loadedSoundsMiddleware),
DevTools.instrument(),
persistState(
window.location.href.match(
/[?&]debug_session=([^&]+)\b/
)
)
)
);
//...


actions.js

export const SHORT_BARK = 'SHORT_BARK';
export function shortBark() {
return {
type: SHORT_BARK,
meta: { sound: 'barks.shortBark' }
};
}


webpack.config.js

resolve: {
extensions: ['', '.js', '.jsx', '.scss', '.mp3'],
},
module: {
loaders: [
{
test: /\.mp3$/,
loader: 'file-loader'
},
]
}

Answer

Turns out I forgot to show the files to express.

app.use('/data', express.static(path.join(__dirname, '/src/data')));
Comments