node.js - 如何通过 Node.js(和 create-react-app)使用 p5.js 声音库预加载

Question

我试图在 Node.js 中使用 p5.js 声音库，而预加载函数只是抛出一个(可以理解的)错误，表明它没有被使用。如何使用 Node 中的预加载功能？

import React, { Component } from 'react';
import p5 from "p5";
import 'p5/lib/addons/p5.dom';
import "p5/lib/addons/p5.sound";
import sound from "./audio/song.mp3";
import './App.css';

let song;

function preload() { // @preload is required by P5.js
    p5.soundFormats('mp3', 'ogg');
    song = p5.loadSound(sound);
}






class App extends Component {

    render() {

        return (
            <div className="App">

               <button>Click me</button>
            </div>
        );
    }
}

export default App;

Answer 1

默认情况下，P5.js 使用全局模式，这意味着它将函数和变量置于全局范围内。这就是您使用 preload() 函数所做的事情。

问题是，这并不总是能与其他库很好地配合，而且看起来它会导致 node.js 出现问题。

您可以使用实例模式解决此问题，该模式将 P5.js 函数打包在一个您可以使用的对象中，而不是将所有内容都放在全局范围内。这是一个简单的例子:

var s = function( sketch ) {

  var x = 100; 
  var y = 100;

  sketch.setup = function() {
    sketch.createCanvas(200, 200);
  };

  sketch.draw = function() {
    sketch.background(0);
    sketch.fill(255);
    sketch.rect(x,y,50,50);
  };
};

var myp5 = new p5(s);

您可以在 this guide 中找到更多信息.