Question

我正在尝试在Node.js中使用p5.js声音库，而preload函数只是抛出一个（可理解的）错误，说它没有被使用。如何在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中找到更多信息。

如何使用Node.js（和create-react-app）使用p5.js声音库预加载

1 个答案: