在实例模式下使用 p5.sound.js：'p5.Amplitude() 不是构造函数'答案

【问题标题】：Using p5.sound.js in instance mode: 'p5.Amplitude() not a constructor'在实例模式下使用 p5.sound.js：'p5.Amplitude() 不是构造函数'
【发布时间】：2016-09-26 00:36:40
【问题描述】：

我正在使用 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) 时，我得到了不确定。

我迷路了！

【问题讨论】：

标签： javascript ecmascript-6 processing processing.js p5.js

【解决方案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);

【讨论】：

感谢凯文的回复。我使用 window.p5 = p5 能够使用 es6 模块加载库。对于后者，我在使用import p5 from '....' 后使库在窗口中可用。我可以使用其余的功能，就像使用 p5 而不是 p 的实例模式一样。 Def 也不是 javascript 专家，但我基于this 项目做出了这个决定，这似乎很顺利。干杯！
我努力了几个小时试图让 p5.js 使用 es6 模块语法，直到我找到你的答案，Kevin。效果很好！
我在这里提出了一个类似的问题，它遵循了一个类似的解决方案，就像你在这里提出的那样...... stackoverflow.com/questions/64887033/...... 我能够得到像 .loadSound() 这样的函数调用工作但不是构造函数，例如：.Envelope() 你知道为什么吗？

【解决方案2】：

您是正确的，您正在使用构建时提供给您的代码的 instance 覆盖库提供的 p5 class。

这应该可行：

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

const sketch = (p5) => {
   window.myp5 = p5;

   p5.setup = () => {
     //whatever
   };

   p5.draw = draw;
}

function draw() {
  //methods hang off the instance:
  const mysound = myp5.loadSound("/path/to/sound.mp3");
  //constructors hang off the class:
  const amp = new p5.Amplitude()
}
new p5(sketch);

请注意，myp5 可用于绘图函数，因为在 sketch 函数的开头进行了赋值。另请注意，您不需要导入插件。

【讨论】：

我在这里提出了一个类似的问题，遵循类似的解决方案，就像你在此处提出的那样......stackoverflow.com/questions/64887033/…我能够让像 .loadSound() 这样的函数调用工作但不是构造函数，例如： .Envelope() 你知道为什么吗？

【解决方案3】：

我想我发现了我们的问题。您需要使用 0.9.0 版本的 p5.sound 库并将其放在项目目录中。我在这里的回答中更全面地解释：

How to import and utilize P5.Sound in Vue?

【讨论】：