인스턴스 모드에서 p5.sound.js 사용 : 'p5.Amplitude()가 생성자가 아닙니다'

Question

p5.js로 응용 프로그램을 작성하기 위해 npm, webpack, babel 환경을 사용하고 있습니다.

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

:

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

가 그럼 난 내 스케치 내부 창에로드 : 모듈로 스케치를 가지고, 내가 instance mode에서 스케치를 가지고 있고 라이브러리를 가져오고 추가 기능을 모듈로 할 수

내가 사용하려고하면 :

amp = new p5.Amplitude() 

가 나는 오류 'p5.Amplitude 생성자 아니다'얻을. 내 예측은 창에 라이브러리 p5의 이름을 지정하는 것과 p5.Amplitude, p5.Vector, p5.Soundfile과 같은 p5.something을 사용하는 라이브러리의 생성자를 사용하는 것 사이에 충돌이 있다는 것입니다. 인스턴스 모드에서 이러한 개체 나 생성자를 사용하는 것에 대한 해결 방법을 찾을 수 없었습니다. 그러나 나는이 생성자가 필요없는 objects의 메소드를 사용할 수 있습니다. 예를 들어, loadSound()은 p5.Soundfile의 메소드입니다. 다음 작품 : 나는 console.log(p5.SoundFile)을하려고 할 때

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

는하지만 정의되지 않은 얻을.

나는 분실했습니다!

Answer 1

저는 JavaScript 전문가는 아니지만 구문이 instance mode 페이지의 구문과 일치하지 않습니다.

특히 여기서 무엇을하고 있습니까?

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

인스턴스 모드 페이지의 구문에 비교해 : 코드 당신이보고있는 문제의 종류를 일으킬려고하고 p5 변수를 재정의처럼

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 변수를 다시 정의하지 귀하의 코드를 다시 작성하고, 대신 인스턴스 모드 페이지에서 구문을 사용

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

Answer 2

당신은 당신이 라이브러리에 의해 제공되는 p5클래스을 덮어 있다는 것을 맞아요 구성시 코드에 제공된 인스턴스입니다.

이 작동합니다 : myp5 때문에 sketch 함수의 시작 부분에 할당의 그리기 기능을 사용할 수 있습니다

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

하는 것으로. 또한 addons를 가져올 필요가 없습니다.