Using p5.sound.js in instance mode: 'p5.Amplitude () is not a constructor'

Question

I am using npm, webpack, babel to write an application with p5.js. To have a sketch as a module, I have a sketch in instance mode and import the library and add-ons as modules:

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

Then I load them into a window inside my sketch:

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

When I try to use:

amp = new p5.Amplitude()

"p5.Amplitude ". , p5 , p5.something p5.Amplitude, p5.Vector, p5.Soundfile. . , . , loadSound() - p5.Soundfile. :

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

console.log(p5.SoundFile), undefined.

!

Answer 1

JavaScript, .

, ?

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);

Answer 2

, p5 , , , .

:

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 draw - sketch. , .