javascript - 在实例模式下使用 p5.sound.js : 'p5.Amplitude() not a constructor'

Question

我正在使用 npm、webpack、babel 环境来编写带有 p5.js 的应用程序。为了能够将草图作为模块，我在 instance mode 中有草图并将库和附加组件作为模块导入:

import p5 from 'p5';
import 'p5/lib/addons/p5.sound';
import 'p5/lib/addons/p5.dom';

然后我将它们加载到我的草图中的窗口:

const sketch = (p5) => {
   window.p5 = p5;
   ...
}
new p5(sketch);

当我尝试使用时:

amp = new p5.Amplitude()

我收到“p5.Amplitude 不是构造函数”错误。我的预测是，在窗口上命名库 p5 与使用库中使用 p5.something 的构造函数之间存在冲突，例如 p5.Amplitude、p5.Vector、p5.Soundfile。我一直无法找到在实例模式下使用这些对象或构造函数的解决方法。但是，我能够使用这些 objects 中的方法不需要构造函数。例如，loadSound() 是 p5.Soundfile 的一个方法。以下作品:

sound = p5.loadSound('assets/sound.wav)

但是当我尝试 console.log(p5.SoundFile) 时，我得到了 undefined。

我迷路了!

Answer 1

我不是 JavaScript 专家，但您的语法与 instance mode 上的语法不匹配页面。

具体来说，你在这里做什么？

const sketch = (p5) => {
   window.p5 = p5;
   ...
}
new p5(sketch);

将其与实例模式页面上的语法进行比较:

var sketch = function (p) {
  var gray = 0; 

  p.setup = function () {
    p.createCanvas(600, 400);
  };

  p.draw = function () {
    p.background(gray);
    p.rect(p.width/2, p.height/2, 200, 200);
  };

  p.mousePressed = function () {
    gray = (gray + 16) % 256;
  };
};

new p5(sketch);

看起来您的代码正在重新定义 p5 变量，这将导致您所看到的各种问题。我会重写您的代码，不再重新定义 p5 变量，而是使用实例模式页面中的语法:

var sketch = function(p) {
   //your code here
   //but don't change the p5 variable!
}
new p5(sketch);