1

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

我不知道如何创建 LoadQueue 并将声音加载到一个组件（顶级：）中App.jsx，然后在不同的组件（App.jsx：的子级）中播放它们Board.jsx。

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

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

  1. webpack.config根据this answer中的说明进行修改，这应该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

4

0 回答 0