generate spectrogram at backend and send as response to client

client/package.json

@@ -18,6 +18,7 @@
     "axios": "^1.8.3",
     "jszip": "^3.10.1",
     "react": "^18.2.0",
+    "react-audio-spectrogram-player": "^2.0.1",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.1"
   },

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);
       }

client/src/contexts/MediaContext.tsx

@@ -3,8 +3,8 @@ import React, { createContext, useState, useContext } from 'react';
 interface MediaContextType {
   mediaFile: { name: string; url: string; type: string } | null;
   setMediaFile: (file: { name: string; url: string; type: string }) => void;
-  response: { file_uuid: string; sr: number; audio_class: string }; 
-  setResponse: (response: { file_uuid: string; sr: number; audio_class: string }) => void;
+  response: { file_uuid: string; sr: number; audio_class: string, spectrogram: string, spec_sr: number }; 
+  setResponse: (response: { file_uuid: string; sr: number; audio_class: string, spectrogram: string, spec_sr: number }) => void;
   extractedFiles: { name: string; url: string }[];
   setExtractedFiles: (files: {name: string; url: string }[]) => void;
   downloadedFileURL:  string;
@@ -20,6 +20,8 @@ export const MediaProvider: React.FC<{ children: React.ReactNode }> = ({ childre
     audio_class: "",
     file_uuid: "",
     sr: 0,
+    spectrogram: "",
+    spec_sr: 0
   });
   const [extractedFiles, setExtractedFiles] = useState<MediaContextType["extractedFiles"]>([]);
   const [downloadedFileURL, setDownloadedFileURL] = useState<MediaContextType["downloadedFileURL"]>("");