Trouble using p5 sound library about react-p5

[Gherciu]

@davidryan-mu Try this:
1: rename function from loudSound to loadSound
2: import p5.sound library from p5 library not from react-p5 import 'p5/lib/addons/p5.sound'

import React, { Component } from 'react';
import Sketch from "react-p5";
import 'p5/lib/addons/p5.sound';

import './App.css';

export default class App extends Component {
    song;
    amp;
    loadedState = false;
  
  setup = p5 => {
      p5.createCanvas(p5.windowWidth, p5.windowHeight);
      p5.angleMode(p5.DEGREES);
      this.song =  p5.loadSound("song.mp3", this.loaded);
      this.amp = new p5.Amplitude();
  }
  
  loaded() {
      this.loadedState = true;
  }
  
  keyPressed() {
      if(this.loadedState)
        this.togglePlaying();
  }
  
  togglePlaying() {
      if (!this.song.isPlaying()) {
          this.song.play();
      } else {
          this.song.pause();
      }
  }
  
  volHistory = [];
  
  draw = p5 => {
      p5.background(0);
  
      let vol = this.amp.getLevel();
      this.volHistory.push(vol);
  
      p5.stroke(255);
      p5.noFill();
  
      p5.translate(p5.width/2, p5.height/2);
      p5.beginShape();
      for(let i = 0; i < 360; i++) {
          let r = p5.map(this.volHistory[i], 0, 1, 50, 500);
          let x = r * p5.cos(i);
          let y = r * p5.sin(i);
  
          p5.vertex(x, y);
      }
      p5.endShape();
  
      if(this.volHistory.length > 360) {
        this.volHistory.splice(0, 1);
      }
  }

  render() {
      return <Sketch setup={this.setup} draw={this.draw}/>
  }
}

[davidryan-mu]

Thanks for the reply. Still getting the same error though. p5.loadSound is not a function. My import statements are the same as yours and the file exists in p5/lib/addons/p5.sound.

[Gherciu]

@davidryan-mu PLS UPDATE react-p5 to version 1.1.8. In terminal run this command npm i [email protected]

[Gherciu]

@davidryan-mu Try to update the library to 1.1.8 version. In terminal run this command npm i [email protected]

[davidryan-mu]

Ran the command and updated react-p5. The error I'm being thrown when I run the app is:

TypeError: Cannot set property 'p5' of undefined
Module.
C:/Users/david/Desktop/3rd_CS/CS322/project/spotify-visualizer/node_modules/react-p5/build/index.js:38427

really sorry for the hassle of this. appreciate the help

[Gherciu]

@davidryan-mu can you pls provide a test repository with entire project structure ?? with your package.json file and js entry point....
I think you have incorrectly updated the library. pls run again npm i [email protected]

[davidryan-mu]

Still the same issue after running that command. Here's a link to a repo for it. https://github.com/davidryan-mu/spotify-visualizer

App.js is the entry point I believe

[jamieweavis]

Hey guys, I'm running into the same issue - I've modified the base demo on CodeSandbox to show that the sound addons aren't being applied to the p5 instance: https://codesandbox.io/s/react-p5-50vmg

[y-71]

Hi , i'm also running in the same issue .
I get : Unhandled Rejection (TypeError): p5.Amplitude is not a constructor

[vennsoh]

This seems to be a problem faced by many...
I'm using react-p5-wrapper and have similar problems too.

P5-wrapper/react#61

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

So if it's just simple load and play a sound then this "hack" will work but if you need to use the constructor then it'll fail.

[vennsoh]

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

[miguellacorte]

Hey, I'm using react (created with Vite config boilerplate) and I'm trying to add p5 sound to a react component using the NPM package called react-p5. However, just adding the import statement "p5/lib/addons/p5.sound"; generates this error:

Uncaught DOMException: Failed to execute 'registerProcessor' on 'AudioWorkletGlobalScope': An AudioWorkletProcessor with name:"recorder-processor" is already registered.
at blob:http://127.0.0.1:5173/232e2cdb-311b-4020-bffc-c365ef399dc2:279:1
127.0.0.1/:1 Uncaught DOMException: Failed to execute 'registerProcessor' on 'AudioWorkletGlobalScope': An AudioWorkletProcessor with name:"sound-file-processor" is already registered.
at blob:http://127.0.0.1:5173/95ed1720-c20d-4f97-a434-e19e58b44025:189:1
127.0.0.1/:1 Uncaught DOMException: Failed to execute 'registerProcessor' on 'AudioWorkletGlobalScope': An AudioWorkletProcessor with name:"amplitude-processor" is already registered.
at blob:http://127.0.0.1:5173/5c00e408-269e-41c4-9331-9534d4908080:252:1

here is the full repo:
https://github.com/miguellacorte/Collaborative_drum_seqeuncer

any ideas what might be going on?