*

1 files changed, 71 insertions, 8 deletions

diff --git a/html/voice-memos/app.js b/html/voice-memos/app.js
index 0436494..f13e28f 100644
--- a/html/voice-memos/app.js
+++ b/html/voice-memos/app.js
@@ -96,6 +96,12 @@ const updateUI = () => {
     elements.playBtn.disabled = audioChunks.length === 0 || isRecording || isPlaying;
     elements.saveBtn.disabled = audioChunks.length === 0 || isRecording;
     
+    // Update recording indicator
+    const recordingIndicator = document.getElementById('recordingIndicator');
+    if (recordingIndicator) {
+        recordingIndicator.style.display = isRecording ? 'block' : 'none';
+    }
+    
     // Update status message
     let statusMessage = '';
     
@@ -113,7 +119,7 @@ const updateUI = () => {
     } else if (!elements.inputSource.value) {
         statusMessage = 'Please allow microphone access and select an input source';
     } else {
-        statusMessage = 'Ready to record. Click "Start Recording" to begin.';
+        statusMessage = 'Ready to record. Click "Record" to begin.';
     }
     
     elements.status.textContent = statusMessage;
@@ -202,12 +208,19 @@ const setupWaveformVisualization = (analyser) => {
     const dataArray = new Uint8Array(bufferLength);
     const canvas = document.createElement('canvas');
     const canvasCtx = canvas.getContext('2d');
+    const recordingIndicator = document.getElementById('recordingIndicator');
+    
+    // Show recording indicator
+    recordingIndicator.style.display = 'block';
     
     elements.waveform.innerHTML = '';
     elements.waveform.appendChild(canvas);
     
     const draw = () => {
-        if (!stateManager.getState().isRecording) return;
+        if (!stateManager.getState().isRecording) {
+            recordingIndicator.style.display = 'none';
+            return;
+        }
         
         requestAnimationFrame(draw);
         analyser.getByteTimeDomainData(dataArray);
@@ -215,19 +228,70 @@ const setupWaveformVisualization = (analyser) => {
         canvas.width = elements.waveform.clientWidth;
         canvas.height = elements.waveform.clientHeight;
         
-        canvasCtx.fillStyle = '#f8f8f8';
+        // Clear the canvas with a gradient background
+        const gradient = canvasCtx.createLinearGradient(0, 0, 0, canvas.height);
+        gradient.addColorStop(0, '#f8f8f8');
+        gradient.addColorStop(1, '#f2f2f7');
+        canvasCtx.fillStyle = gradient;
         canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
         
-        canvasCtx.lineWidth = 2;
-        canvasCtx.strokeStyle = '#007AFF';
+        // Draw center line
+        canvasCtx.beginPath();
+        canvasCtx.strokeStyle = '#e5e5ea';
+        canvasCtx.lineWidth = 1;
+        canvasCtx.moveTo(0, canvas.height / 2);
+        canvasCtx.lineTo(canvas.width, canvas.height / 2);
+        canvasCtx.stroke();
+        
+        // Draw waveform
         canvasCtx.beginPath();
         
+        // Modern style with thicker lines and smoother curves
+        canvasCtx.lineWidth = 2;
+        canvasCtx.strokeStyle = '#ff3b30';
+        
         const sliceWidth = canvas.width / bufferLength;
         let x = 0;
         
+        // First pass to smooth the data
+        const smoothedData = [];
+        const smoothingFactor = 0.2;
+        
         for (let i = 0; i < bufferLength; i++) {
-            const v = dataArray[i] / 128.0;
-            const y = v * canvas.height / 2;
+            const raw = dataArray[i] / 128.0 - 1.0;
+            
+            // Apply smoothing
+            if (i > 0) {
+                smoothedData.push(smoothedData[i-1] * smoothingFactor + raw * (1 - smoothingFactor));
+            } else {
+                smoothedData.push(raw);
+            }
+        }
+        
+        // Draw the smoothed waveform
+        for (let i = 0; i < bufferLength; i++) {
+            const v = smoothedData[i];
+            const y = (v * canvas.height / 4) + canvas.height / 2;
+            
+            if (i === 0) {
+                canvasCtx.moveTo(x, y);
+            } else {
+                canvasCtx.lineTo(x, y);
+            }
+            
+            x += sliceWidth;
+        }
+        
+        canvasCtx.stroke();
+        
+        // Draw a reflection of the waveform (mirrored and more subtle)
+        canvasCtx.beginPath();
+        canvasCtx.strokeStyle = 'rgba(255, 59, 48, 0.3)';
+        x = 0;
+        
+        for (let i = 0; i < bufferLength; i++) {
+            const v = -smoothedData[i]; // Mirror the waveform
+            const y = (v * canvas.height / 4) + canvas.height / 2;
             
             if (i === 0) {
                 canvasCtx.moveTo(x, y);
@@ -238,7 +302,6 @@ const setupWaveformVisualization = (analyser) => {
             x += sliceWidth;
         }
         
-        canvasCtx.lineTo(canvas.width, canvas.height / 2);
         canvasCtx.stroke();
     };