如何使用 react-p5-wrapper 将 p5.sound 添​​加到 React? [英] How do I add p5.sound to React using react-p5-wrapper?

问题描述

我正在尝试弄清楚如何将 p5.sound 包含到我的 p5 Sketch 中.目前我正在使用 react-p5-wrapper

解决方案

我有一段时间没有使用 p5，但我怀疑您遇到了与我在 answer 你评论过.在您的解决方法答案中，您有两个具有相同名称的不同对象 p5，其效果是 window.p5(p5 类)被同名的 sketch 函数(p5 实例)的参数遮住了.您需要访问两者.

有一个约定，类以大写字母开头，所以我会先试试这个:

import * as ml5 from "ml5";从p5"导入 * 作为 P5导入p5/lib/addons/p5.sound"；导出默认函数草图(p5){p5.setup = () =>{p5.createCanvas(400, 400)//方法挂起实例:歌曲 = p5.loadSound(url("./assets/hurry.mp3"))//构造函数挂在类上:env = new P5.Envelope()

如果您发现 P5 和 p5 之间的区别令人困惑，您可以将类命名为除 p5 之外的任何其他名称，例如:

import * as p5Class from 'p5'...导出默认函数草图(p5){p5.setup = () =>{p5.createCanvas(400, 400)//方法挂起实例:歌曲 = p5.loadSound(url("./assets/hurry.mp3"))//构造函数挂在类上:env = new p5Class.Envelope()}}

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

解决方案

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()
    }
}

这篇关于如何使用 react-p5-wrapper 将 p5.sound 添​​加到 React?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！