title: Using PreloadJS and SoundJS in React app to preload sounds
body: <p>I’m trying to use PreloadJS and SoundJS in a React app to preload all sounds and then play from the preloaded cache.</p>
  
  <p>I can't figure out how to create the LoadQueue and load the sounds in one component (top level: <code>App.jsx</code> ), and play them in a different component (child of <code>App.jsx</code>: <code>Board.jsx</code>).</p>
  
  <p>The preloader is working fine but I can't get sounds to play in the child component. When I try to call <code>createjs.Sound.play()</code> I keep getting error messages that <code>createjs.Sound</code> is undefined. I think it has something to do with the fact that I'm installing the Sound plugin in one component and then trying to access it somewhere else, but the Sound plugin seems to be attached to the LoadQueue itself and I don't think I want a new LoadQueue in the <code>Board</code> component? What am I doing wrong?</p>
  
  <p>Things I have tried so far that have not worked:</p>
  
  <ol>
  <li>Modifying <code>webpack.config</code> according to instructions in <a href="https://stackoverflow.com/questions/37926257/using-createjs-soundjs-in-react-web-app">this answer</a>, which is supposed to make <code>createjs</code> available in the global context</li>
  <li>Defining a <code>playSound</code> method in my top-level component (where the LoadQueue is defined) and passing that method as a prop to the child component where I want to play the sound.</li>
  </ol>
  
  <p><code>asset_loader.js</code></p>
  
  <pre><code>import createjs from 'preload-js';
  import manifest from '../sounds/asset_manifest.json';
  
  const assetLoader = () =&gt; {
    // Reset the UI
    document.getElementById('progress').style.width = '0px';
  
    // Create a preloader.
    const preload = new createjs.LoadQueue();
    preload.installPlugin(createjs.Sound);
    const assetManifest = manifest.manifest;
  
    // If there is an open preload queue, close it.
    if (preload != null) {
      preload.close();
    }
  
    // File complete handler
    const handleFileLoad = (event) =&gt; {
      console.log(`Preloaded: ${event.item.id}`);
    };
  
    // Overall progress handler
    const handleOverallProgress = () =&gt; {
      document.getElementById('progress').style.width = `${(preload.progress * document.getElementById('progress-wrap').clientWidth)}px`;
    };
  
    // Error handler
    const handleFileError = (event) =&gt; {
      console.log(`error: ${event.item.id}, ${event.text}`);
    };
  
    const handleComplete = () =&gt; {
      console.log('loading complete');
    };
  
    preload.on('fileload', handleFileLoad);
    preload.on('progress', handleOverallProgress);
    preload.on('error', handleFileError);
    preload.on('complete', handleComplete);
    preload.setMaxConnections(5);
  
    const loadAnother = () =&gt; {
      // Get the next manifest item, and load it
      const item = assetManifest.shift();
      preload.loadFile(item);
    };
  
    const loadAll = () =&gt; {
      while (assetManifest.length &gt; 0) {
        loadAnother();
      }
    };
    loadAll();
  };
  
  export default assetLoader;
  </code></pre>
  
  <p><code>App.jsx</code></p>
  
  <pre><code>import React from 'react';
  
  // …
  
  import assetLoader from './utils/asset_loader';
  
  
  class App extends React.Component {
  
    componentDidMount() {
      assetLoader();
    }
  
  // …
  </code></pre>
  
  <p><code>Board.jsx</code></p>
  
  <pre><code>// …
  import createjs from 'preload-js';
  
  //…
  
  playSound(item) {
       console.log(`playing sound: ${item}`);
       createjs.Sound.play(item);
    }
  </code></pre>
  
  <p>Error message: <code>Uncaught TypeError: Cannot read property 'play' of undefined</code></p>