1

我试图弄清楚如何将 p5.sound 包含到我的 p5 Sketch 中。目前我正在使用 react-p5-wrapper https://github.com/and-who/react-p5-wrapper/让 p5 进入 React。

回购中有一个类似的问题，我也在那里问过同样的问题，https://github.com/and-who/react-p5-wrapper/issues/11#issuecomment-728986112但我不能找出他们建议的解决问题的步骤。

我已经在我的 Sketch 文件中添加了import * as p5 from "p5"和import "p5/lib/addons/p5.sound"，但它不起作用。根据屏幕截图，我得到了错误。

我只是想遵循本教程https://www.youtube.com/watch?v=8HEgeAbYphA&feature=emb_logo但尝试在 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)
...

在此处输入图像描述

4

2 回答 2

1

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

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

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

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

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()
    }
}
于 2020-11-20T02:01:03.017 回答
0

我有一个仅适用于函数调用的解决方法。我在调用 import * as p5 from "p5" 之后添加了 window.p5 = p5

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

然后我就可以使用 p5.loadSound() 函数了。但是，如果我尝试使用新的 p5.Envelope() 构造函数，它仍然会给我一个错误。

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

更新：啊，只是改变p5.Envelope() --> p5.constructor.Envelope()解决了问题！

于 2020-11-18T06:58:18.640 回答