Creé un visualizador de audio usando p5.js y React y necesito ayuda.

Estoy tratando de cambiar el estado del texto de entrada de mi botón de Play a Stop cuando la canción comienza a reproducirse y de Stop a Play cuando el usuario decide detener la canción en ese momento.

Estoy usando la biblioteca react-p5 y todo funciona muy bien hasta que setState cuando un usuario hace clic en el botón de reproducción. Dado que eso provoca un renderizado, rompe mi lienzo.

¿Hay alguna manera de volver a renderizar solo el elemento del botón? No estoy muy seguro de cómo cambiaría el texto interno de mi botón sin un cambio de estado.

 import React, { useState } from 'react'; import Sketch from 'react-p5'; import 'p5/lib/addons/p5.sound'; import Beat from '../../instrumental.mp3'; const App = () => { let width = 900; let height = 600; let song; let fft; const [flag, setFlag] = useState(true); const preload = (p) => { p.soundFormats('mp3'); song = p.loadSound(Beat); } const setup = (p, canvasParentRef) => { // react-p5 conveniently initializes window.p5 thats why all the other p5's // have been changed to p in order to create an FFT object fft = new p5.FFT(); // console.log(p.point) // use parent to render the canvas in this ref // without it p5 will render the canvas outside of this component const canvas = p.createCanvas(width, height).parent(canvasParentRef); } const playStop = () => { if (song.isPlaying()) { song.pause(); setFlag(true); //p.noLoop(); } else { song.play(); setFlag(false); //p.loop(); } } const draw = p => { p.background(0); // by default the stroke color is black // we need to change this in order to see the wave p.stroke(255, 204, 0); // no fill in between waves p.noFill(); // returns an array with 1024 elements let wave = fft.waveform(); p.beginShape(); // By looping through the waveform data, we are able // to draw the waveform across the canvas for (let i = 0; i < width; i++) { // create an index that maps the for loop variable // to the index of the wave we want // value must be integer thats we we use floor let index = p.floor(p.map(i, 0, width, 0, wave.length)); let x = i; let y = wave[index] * 100 + height / 2; p.vertex(x, y); } p.endShape(); } return ( <div className='outerbox'> <h1>Audio Visualizer</h1> <Sketch preload={preload} setup={setup} draw={draw}/> {flag ? <button onClick={playStop}>Play</button> : <button onClick={playStop}>Stop</button>} </div> ); } export default App;

Lo triste es que no hay muchos recursos disponibles que incluyan reaccionar + p5.js

Si alguien quisiera tomarse el tiempo y clonar este repositorio para ver cuál podría ser el problema, se lo agradecería mucho.

Enlace de repositorio: https://github.com/imperium11/audio-visualizer

1. npm i
2. npm run dev-build
3. npm start