Как добавить p5.sound в React с помощью react-p5-wrapper?

Я пытаюсь понять, как включить 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, но я не могу понять шаги, которые они рекомендовали для решения проблема.

Я добавил import * as p5 from "p5" и import "p5/lib/addons/p5.sound" в свой файл Sketch, но это не работает. У меня ошибка как на скриншоте.

Я просто пытаюсь следовать этому руководству 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)
...

введите здесь описание изображения


reactjs javascript ml5 p5.js
person Vennsoh    schedule 18.11.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я давно не работал с 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()
    }
}
person nvioli    schedule 20.11.2020

arrow_upward
0
arrow_downward

У меня есть обходной путь, который работает только с вызовами функций. Я добавил window.p5 = p5 после вызова import * как 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() решает проблему!

person Vennsoh    schedule 18.11.2020