Question

我正在尝试在React应用程序中使用PreloadJS和SoundJS来预加载所有声音，然后从预加载的缓存中播放。

我无法弄清楚如何创建LoadQueue并在一个组件中加载声音（顶级：urlencode.），并在另一个组件中播放它们（App.jsx的孩子：{{ 1}}）。

预加载器工作正常但我无法在子组件中播放声音。当我尝试调用App.jsx时，我不断收到Board.jsx未定义的错误消息。我认为这与我在一个组件中安装Sound插件然后尝试在其他地方访问它的事实有关，但Sound插件似乎附加到LoadQueue本身而我认为我不想要createjs.Sound.play()组件中的新LoadQueue？我做错了什么？

到目前为止，我尝试过的事情没有奏效：

根据this answer中的说明修改createjs.Sound，该说明应该在全局范围内提供Board
在我的顶级组件中定义webpack.config方法（定义了LoadQueue），并将该方法作为道具传递给我想要播放声音的子组件。

createjs

playSound

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

在React应用程序中使用PreloadJS和SoundJS来预加载声音

0 个答案: