Использование PreloadJS и SoundJS в приложении React для предварительной загрузки звуков

Question

Я пытаюсь использовать PreloadJS и SoundJS в приложении React для предварительной загрузки всех звуков, а затем воспроизводить их из предварительно загруженного кэша.

Я не могу понять, как создать LoadQueue и загрузить звуки в одном компоненте (верхний уровень: App.jsx) и воспроизводить их в другом компоненте (потомок App.jsx: Board.jsx).

Прелоадер работает нормально, но я не могу воспроизвести звуки в дочернем компоненте. Когда я пытаюсь позвонить createjs.Sound.play() Я продолжаю получать сообщения об ошибках, которые createjs.Sound не определено Я думаю, что это как-то связано с тем, что я устанавливаю плагин Sound в одном компоненте, а затем пытаюсь получить к нему доступ в другом месте, но плагин Sound, кажется, подключен к самой LoadQueue, и я не думаю, что хочу новый LoadQueue в Board составная часть? Что я делаю неправильно?

То, что я пробовал до сих пор, что не сработало:

1. Изменение webpack.config в соответствии с инструкциями в этом ответе, который должен сделать createjs доступны в глобальном контексте
2. Определение playSound метод в моем компоненте верхнего уровня (где определено LoadQueue) и передача этого метода в качестве опоры дочернему компоненту, где я хочу воспроизвести звук.

asset_loader.js

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

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}`);
  };

  // Overall progress handler
  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}`);
  };

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

export default assetLoader;

App.jsx

import React from 'react';

// …

import assetLoader from './utils/asset_loader';


class App extends React.Component {

  componentDidMount() {
    assetLoader();
  }

// …

Board.jsx

// …
import createjs from 'preload-js';

//…

playSound(item) {
     console.log(`playing sound: ${item}`);
     createjs.Sound.play(item);
  }

Сообщение об ошибке: Uncaught TypeError: Cannot read property 'play' of undefined