'Cannot read property 'play' of undefined'

[rifkegribenes]

Hi this is probably user error but I can't figure out how to fix it. I'm using PreloadJS to preload sounds in a React app. Preloading appears to be working fine, I get a console log for each file as it's loaded from the manifest. But every time I try to play a sound I get Uncaught TypeError: Cannot read property 'play' of undefined

For the purposes of testing I'm just trying to get each sound to play as it loads, although ultimately I want to be able to play them on demand from another component. But I can't even get them to play on load now.

this is a snippet of assetLoader.js, which is being called on ComponentDidMount in the root component of the app:

import createjs from 'preload-js';
import manifest from '../sounds/asset_manifest.json';

export const assetLoader = () => {
  // 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) => {
    console.log(`Preloaded: ${event.item.id}`);
    createjs.Sound.play(event.item.id);
  };

//////// The above line is causing the error ////////

 const handleOverallProgress = () => {
    document.getElementById('progress').style.width = `${(preload.progress * document.getElementById('progress-wrap').clientWidth)}px`;
  };

  // Error handler
  const handleFileError = (event) => {
    console.log(`error: ${event.item.id}, ${event.text}`);
  };

  // Preload complete
  const handleComplete = () => {
    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 = () => {
    // Get the next manifest item, and load it
    const item = assetManifest.shift();
    preload.loadFile(item);
  };
  const loadAll = () => {
    while (assetManifest.length > 0) {
      loadAnother();
    }
  };
  loadAll();

[gSkinner-Blair]

Hey! You don't appear to be importing Sound - just Preload. Could that be the issue?

[rifkegribenes]

@gSkinner-Blair Definitely could be, I thought just installing the plugin preload.installPlugin(createjs.Sound); took care of that and didn't realize I had to import separately. But now that I tried to import it separately I was unable to get the app to compile at all.

I tried first with npm createjs-soundjs, and got

soundjs-0.6.2.min.js:17 Uncaught TypeError: Cannot read property 'toString' of undefined
    at Function../node_modules/createjs-soundjs/lib/soundjs-0.6.2.min.js.b._parsePath (soundjs-0.6.2.min.js:17)
    at Function../node_modules/createjs-soundjs/lib/soundjs-0.6.2.min.js.b._registerSound (soundjs-0.6.2.min.js:17)
    at Function../node_modules/createjs-soundjs/lib/soundjs-0.6.2.min.js.b.initLoad (soundjs-0.6.2.min.js:17)
    at Function.<anonymous> (soundjs-0.6.2.min.js:17)
    at a../node_modules/preload-js/index.js.b._createLoadItem (index.js:12)
    at a../node_modules/preload-js/index.js.b._addItem (index.js:12)
    at a../node_modules/preload-js/index.js.b.loadFile (index.js:12)
    at loadAnother (asset_loader.js:52)
    at loadAll (asset_loader.js:56)
    at Object.assetLoader (asset_loader.js:59)

then I tried just saving Sound.js directly to the project directory and importing it that way, and got

Sound.js:482 Uncaught TypeError: createjs.deprecate is not a function
    at Sound.js:482
    at Object../src/utils/Sound.js (Sound.js:1775)
    at __webpack_require__ (bootstrap 59e798d1380fc80d0185:659)
    at fn (bootstrap 59e798d1380fc80d0185:85)
    at Object../src/utils/asset_loader.js (asset_loader.js:1)
    at __webpack_require__ (bootstrap 59e798d1380fc80d0185:659)
    at fn (bootstrap 59e798d1380fc80d0185:85)
    at Object../src/App.jsx (log-apply-result.js:30)
    at __webpack_require__ (bootstrap 59e798d1380fc80d0185:659)
    at fn (bootstrap 59e798d1380fc80d0185:85)

Is there something else I need to do to get Preload and Sound to work together?

[gSkinner-Blair]

Seems like you might be using mismatched versions of Sound and Preload. What versions of the are you using?

[rifkegribenes]

PreloadJS: 0.6.3 SoundJS: 1.0.1

which are the right versions to use?

[lannymcnie]

Ideally use 1.0+ libraries together.