How do I add p5.sound to React using react-p5-wrapper?

问题

I'm trying to get figure how I can include p5.sound to my p5 Sketch. Currently I'm using react-p5-wrapper https://github.com/and-who/react-p5-wrapper/ to get p5 into React.

There's a similar issue raised in the repo and I've asked the same question there too, https://github.com/and-who/react-p5-wrapper/issues/11#issuecomment-728986112 but I can't quite figure out the steps they recommended to solve the problem.

I've added import * as p5 from "p5" and import "p5/lib/addons/p5.sound" in my Sketch file but it isn't working. I got the error as per the screenshot.

I'm just trying to follow this tutorial https://www.youtube.com/watch?v=8HEgeAbYphA&feature=emb_logo but try to do it in React.

import * as React from "react"
import * as p5 from "p5"
import "p5/lib/addons/p5.sound"
import * as ml5 from "ml5"

export default function sketch(p5) {
    p5.setup = () => {
        p5.createCanvas(400, 400)

        env = new p5.Envelope()
        env.setADSR(0.05, 0.1, 0.5, 1)
        env.setRange(1.2, 0)

        wave = new p5.Oscillator()
        wave.setType("sine")
        wave.start()
        wave.freq(440)
        wave.amp(env)
...

回答1:

I haven't worked with p5 in a while, but I suspect you're having the same problem as I solved in the answer you commented on. In your workaround answer, you have two different objects with the same name, p5, with the effect that window.p5 (the p5 class) is shadowed by the argument to the sketch function of the same name (the p5 instance). You need access to both.

There's a convention that classes start with a capital letter, so I'd try this first:

import * as ml5 from "ml5"
import * as P5 from "p5"
import "p5/lib/addons/p5.sound"

export default function sketch(p5) {
    p5.setup = () => {
        p5.createCanvas(400, 400)
        //methods hang off the instance:
        song = p5.loadSound(url("./assets/hurry.mp3"))
        //constructors hang off the class:
        env = new P5.Envelope()

If you find the distinction between P5 and p5 confusing, you can name the class anything else besides p5, like:

import * as p5Class from 'p5'
...
export default function sketch(p5) {
    p5.setup = () => {
        p5.createCanvas(400, 400)
        //methods hang off the instance:
        song = p5.loadSound(url("./assets/hurry.mp3"))
        //constructors hang off the class:
        env = new p5Class.Envelope()
    }
}

回答2:

I have a workaround that only works on function calls. I added window.p5 = p5 after calling import * as p5 from "p5"

import * as ml5 from "ml5"
window.p5 = p5
import "p5/lib/addons/p5.sound"

Then I'll be able to use the p5.loadSound() function. However if I try to use new p5.Envelope() constructor it'll still throw me an error.

export default function sketch(p5) {
    p5.setup = () => {
        p5.createCanvas(400, 400)
        song = p5.loadSound(url("./assets/hurry.mp3")) // Will work
        env = new p5.Envelope() // Will error
...

Update: Ah just changing p5.Envelope() --> p5.constructor.Envelope() fixes the problem!

来源：https://stackoverflow.com/questions/64887033/how-do-i-add-p5-sound-to-react-using-react-p5-wrapper

标签

javascript

reactjs

p5.js

ml5