generate spectrogram at backend and send as response to client

client/src/Pages/PreviewPage.tsx

@@ -11,6 +11,8 @@ import {
 import { VolumeUp as VolumeUpIcon, ErrorOutline as ErrorIcon } from '@mui/icons-material';
 import StepperComponent from '../components/StepperComponent';
 import { useMediaContext } from '../contexts/MediaContext';
+// @ts-ignore
+import SpectrogramPlayer from "react-audio-spectrogram-player"
 
 function PreviewPage() {
   const navigate = useNavigate();
@@ -84,11 +86,10 @@ function PreviewPage() {
                 {mediaFile.name}
               </Typography>
               <Box sx={{ width: '100%', mt: 2 }}>
-                <audio
-                  ref={videoRef}
+                <SpectrogramPlayer
                   src={mediaFile.url}
-                  style={{ width: '100%' }}
-                  controls
+                  sxx={JSON.parse(response.spectrogram)}
+                  SampleRate={response.spec_sr}
                 />
               </Box>
               <p>Audio Classification: {audioClass || "No data received"}</p>

client/src/Pages/UploadPage.tsx

@@ -91,6 +91,8 @@ function UploadPage() {
         file_uuid: string;
         sr: number;
         audio_class: string;
+        spectrogram: string;
+        spec_sr: number;
       }>("/api/upload", formData, {
         headers: {
           "Content-Type": "multipart/form-data",
@@ -104,6 +106,8 @@ function UploadPage() {
           audio_class: res.data.audio_class,
           file_uuid: res.data.file_uuid,
           sr: res.data.sr,
+          spectrogram: res.data.spectrogram,
+          spec_sr: res.data.spec_sr
         }));
         setUpload(true);
       }