Update Web/script.js

Web/script.js

@@ -137,6 +137,7 @@ function createWaveformItem(blob, forcedUrl = null) {
     // Create WaveSurfer
     const wavesurfer = WaveSurfer.create({
         container,
+        autoCenter: true,
         waveColor: "#bbb",
         progressColor: "#ff5500",
         cursorColor: "#333",
@@ -145,7 +146,10 @@ function createWaveformItem(blob, forcedUrl = null) {
         responsive: true,
     });
 
-    wavesurfer.load(url);
+    // Analyze
+    analyzeBtn.addEventListener("click", () => {
+        analyzeAudio(blob);
+    });
 
     // Toggle play/pause
     playBtn.addEventListener("click", () => {
@@ -153,10 +157,8 @@ function createWaveformItem(blob, forcedUrl = null) {
         playBtn.innerText = wavesurfer.isPlaying() ? "Pause" : "Play";
     });
 
-    // Analyze
-    analyzeBtn.addEventListener("click", () => {
-        analyzeAudio(blob);
-    });
+    wavesurfer.load(url);
+
 
     // Metadata
     blob.arrayBuffer().then((buffer) => {
@@ -183,7 +185,7 @@ async function analyzeAudio(blob) {
     responseBox.innerHTML = "<em>Analyzing...</em>";
 
     // Convert Blob to File
-    const file = new File([blob], blob.name || "audio.wav", { type: blob.type });
+    const file = new File([blob], blob.name || "recording.wav", { type: blob.type });
 
     const formData = new FormData();
     formData.append("files", file);
@@ -203,7 +205,15 @@ async function analyzeAudio(blob) {
           const confidencePercent = Math.round(item.confidence * 100);
           message = `${item.filename} is ${item.label} with confidence of ${confidencePercent}%`;
         }
-        responseBox.innerHTML = `<pre>${message}</pre>`;
+        let messageVolume = "";
+        if (data[0]?.volume === "silent") {
+          messageVolume = "The audio appears to be silent or contains no detectable speech. Please record/select another file! ";
+          message = ""
+        }
+        if (data[0]?.volume === "augmented") {
+          messageVolume = "The detected speech volume was low, so a volume augmentation was applied before analysis. ";
+        }
+        responseBox.innerHTML = `<span style="color:red;">${message}</span>`;
     } catch (err) {
         responseBox.innerHTML = `<span style="color:red;">Analysis failed.</span>`;
         console.error(err);