Replies: 1 comment
-
There's an |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hello! I was wondering if perhaps someone would help me with a problem I’m encountering in a code using Wavesurfer on a React App.
Here is the situation : I have a folder on my Desktop called packet in which, every 5 seconds are uploaded audio files of 5s.
On my backend is a node server fetching the prelast modified file of the folder (corresponding to the prelast audio added to the folder) and returning the path of this file to my react app frontend.
My frontend then fetches this path from the backend and draws the WaveForm of this audiofile thanks to WaveSurfer. Every five seconds, there is a new request from my front towards my backend in order to have a new file. Therefore every 5s there is a new waveform drawn on my frontend.
Here is my front end code :
import React, { useEffect, useRef, useState } from "react";
import WaveSurfer from "wavesurfer.js";
const formWaveSurferOptions = (ref) => ({
container: ref,
waveColor: "#eee",
progressColor: "OrangeRed",
cursorColor: "OrangeRed",
barWidth: 3,
barRadius: 3,
responsive: true,
height: 150,
normalize: true,
partialRender: true,
});
export default function ShortWaveform({ name }) {
const [preLastModifiedFile, setPreLastModifiedFile] = useState('');
const waveformRef = useRef(null);
const wavesurfer = useRef(null);
const [isPlaying, setIsPlaying] = useState(false);
const [filePath, setfilePath] = useState('');
const fetchData = async () => {
try {
const response = await fetch(
http://localhost:3002/api/getPreLastModifiedFile/${name}
);
const data = await response.json();
setPreLastModifiedFile(data.preLastModifiedFile);
setfilePath(data.preLastModifiedFile);
};
useEffect(() => {
fetchData(); // Charger immédiatement lors de la création du composant
}, [isPlaying]); // Ajouter volume comme dépendance
useEffect(() => {
if (preLastModifiedFile) {
const options = formWaveSurferOptions(waveformRef.current);
options.autopause=false;
wavesurfer.current = WaveSurfer.create(options);
wavesurfer.current.on("ready", () => {
});
// Nettoyer l'instance de wavesurfer lorsque le composant est démonté
return () => wavesurfer.current.destroy();
}
}, [preLastModifiedFile]);
const handlePlayPause = () => {
setIsPlaying(!isPlaying);
wavesurfer.current.playPause();
};
return (
{!isPlaying ? "Play" : "Pause"}
);
}
The problem is that if I play the audio (clicking on the button Play) emitted let’s say at t=0s, then when the waveform of the audio emitted at t=5s appears on my screen, it immediately switches to Pause, and the audio does not play automatically even though I didn’t click on the button. What I’d like is for the audio number 2, 3, 4…. to automatically play if I decided to play the first one (what I’m actually doing is trying to listen without interruption to an audio which I’ve cut in audiopackets of 5 seconds). Do you have any idea as to how to do this?
Thank you!
Beta Was this translation helpful? Give feedback.
All reactions