question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

'Cannot read property 'play' of undefined'

See original GitHub issue

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();

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
rifkegribenescommented, Nov 14, 2017

@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?

1reaction
gSkinner-Blaircommented, Nov 14, 2017

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

[SOLVED] Uncaught TypeError: Cannot read property 'play' of ...
It means whatever object you are trying to use .play on is null or undefined. Post the code if you need more precise...
Read more >
The Problem is :Cannot read property 'play' of undefined
This is a tricky one. It happens because i is function-scoped, meaning that one and the same i is used for any point...
Read more >
Cannot read property 'play' of undefined - Phaser 3 - Discourse
I'm having trouble getting a sprite animation to work. I'm trying to play a sprite animation the same why as in the “creating...
Read more >
Uncaught TypeError: Cannot read property 'play' of undefined ...
Steps to reproduce: Open the bin: http://jsbin.com/wuhita/2/edit?html,js,console,output; Click on the big "click me" and see the error pop ...
Read more >
Uncaught TypeError : Cannot read properties of undefined
Looking for ways to handle Uncaught TypeError: Cannot read property of undefined in JavaScript? This guide will help you to catch errors.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found