preload sounds

src/sound/soundReducer.js

@@ -2,6 +2,14 @@ import actions from '../actionTypes';
 import { finishedSounds } from './../sound/sounds';
 import { Howl } from 'howler';
 
+const importAll = require =>
+    require.keys().map(sound => {
+        const soundFile = require(sound);
+        return [sound.replace(/^\.\/(\w+)_?.+/, '$1'), new Howl({ src: soundFile, loop: false })];
+    });
+
+const soundMap = Object.fromEntries(importAll(require.context('./../assets/sounds/', false, /.mp3$/)));
+
 export const activeSoundSelector = state => {
     return state.sounds.filename;
 };
@@ -10,12 +18,9 @@ const defaultSoundState = {
     filename: finishedSounds[0].filename,
 };
 
-// TODO: Preload these to evade lag before playing a sound
 const playFinishedSound = filename => {
-    new Howl({
-        src: [require(`./../assets/sounds/${filename}`)],
-        loop: false,
-    }).play();
+    const sound = soundMap[filename];
+    sound.play();
 };
 
 export default (state = defaultSoundState, action) => {

src/sound/sounds.js

@@ -3,34 +3,34 @@ import _ from 'lodash';
 export const finishedSounds = [
     {
         displayName: 'Lightsaber',
-        filename: 'lightsaber.mp3',
+        filename: 'lightsaber',
     },
     {
         displayName: 'Wakawaka',
-        filename: 'wakawaka.mp3',
+        filename: 'wakawaka',
     },
     {
         displayName: 'Chewbacca growl',
-        filename: 'chewbacca.mp3',
+        filename: 'chewbacca',
     },
     {
         displayName: '"Hadouken!"',
-        filename: 'hadouken.mp3',
+        filename: 'hadouken',
     },
     {
         displayName: '"Bestefar!"',
-        filename: _.sample(['bestefar_0.mp3', 'bestefar_1.mp3']),
+        filename: _.sample(['bestefar_0', 'bestefar_1']),
     },
     {
         displayName: 'Cow mooing',
-        filename: 'cow.mp3',
+        filename: 'cow',
     },
     {
         displayName: 'Alfons: "Jag ska bara.."',
-        filename: _.sample(['jag_ska_bara_0.mp3', 'jag_ska_bara_1.mp3', 'jag_ska_bara_2.mp3']),
+        filename: _.sample(['jag_ska_bara_0', 'jag_ska_bara_1', 'jag_ska_bara_2']),
     },
     {
         displayName: 'Record scratch',
-        filename: 'record_scratch.mp3',
+        filename: 'record_scratch',
     },
 ];