Comments (12)
@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}/>
}
}
from react-p5.
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.
from react-p5.
@davidryan-mu PLS UPDATE react-p5
to version 1.1.8
. In terminal run this command npm i [email protected]
from react-p5.
@davidryan-mu Try to update the library to 1.1.8 version. In terminal run this command npm i [email protected]
from react-p5.
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
from react-p5.
@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]
from react-p5.
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
from react-p5.
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
from react-p5.
Hi , i'm also running in the same issue .
I get : Unhandled Rejection (TypeError): p5.Amplitude is not a constructor
from react-p5.
This seems to be a problem faced by many...
I'm using react-p5-wrapper and have similar problems too.
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.
from react-p5.
Ah just changing p5.Envelope() --> p5.constructor.Envelope()
fixes the problem!
from react-p5.
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?
from react-p5.
Related Issues (20)
- Is it possible to change the image displayed with React image upload? HOT 2
- Problem with texture img when changing variable on click.
- How can I access to p5.Vector class? HOT 3
- Uncaught TypeError: particles[i].follow is not a function HOT 1
- Typing not available for the p5 declared in the window. HOT 1
- fft.waveform() doesn't return correct array
- issues with p5 sound library import HOT 3
- Cannot read properties of undefined (reading 'stringToGlyphs')
- Type errors appearing when implementing sketch in TS HOT 1
- Multiple instances of react-p5 don't seem to work HOT 2
- `noCanvas()` doesn't seem to work HOT 2
- windowWidth not defined HOT 2
- elements render twice requiring strict mode to be removed HOT 2
- stop sound if user navigates to another tab. HOT 1
- `window is not defined` even with the dynamic import on Next.js HOT 1
- Failed to load image in preload function HOT 1
- Can we update package.json to have the latest and greatest p5.js version? HOT 1
- Renderer for canvas? HOT 1
- Passing additional arguments to functions draw() and setup() HOT 1
- :boom: BUG: deconstruct not works ! HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-p5.