From 5c2a5b0ceccc6d3894e2dddaefa1a21efe6cfbbc Mon Sep 17 00:00:00 2001
From: Alexander Whitestone <alexpaynex@gmail.com>
Date: Tue, 24 Mar 2026 08:51:35 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20Research:=20NotebookLM=20=E2=80=94=20cr?=
 =?UTF-8?q?eate=20audio=20overview=20of=20SOUL.md=20as=20podcast=20(#293)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refs #293
Agent: groq
---
 app.js     | 61 ++++++++++++++++++++++++++++++++++++------------------
 index.html |  2 +-
 style.css  |  5 +++++
 3 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/app.js b/app.js
index aaac2f2..4844857 100644
--- a/app.js
+++ b/app.js
@@ -2719,33 +2719,54 @@ document.getElementById('audio-toggle').addEventListener('click', () => {
   }
 });
 
-// Podcast toggle
 document.getElementById('podcast-toggle').addEventListener('click', () => {
-  try {
-    fetch('SOUL.md')
-      .then(response => {
-        if (!response.ok) throw new Error('Failed to load SOUL.md');
-        return response.text();
-      })
-      .then(text => {
-        const utterance = new SpeechSynthesisUtterance(text);
+  const btn = document.getElementById('podcast-toggle');
+  if (speechSynthesis.pending) return;
+  
+  fetch('SOUL.md')
+    .then(response => {
+      if (!response.ok) throw new Error('Failed to load SOUL.md');
+      return response.text();
+    })
+    .then(text => {
+      // Split text into paragraphs for better speech flow
+      const paragraphs = text.split('\n').filter(p => p.trim()).slice(1); // Skip title line
+      
+      if (!paragraphs.length) {
+        throw new Error('No content found in SOUL.md');
+      }
+
+      let index = 0;
+      
+      const speakNext = () => {
+        if (index >= paragraphs.length) {
+          btn.disabled = false;
+          return;
+        }
+        
+        const utterance = new SpeechSynthesisUtterance(paragraphs[index++]);
         utterance.lang = 'en-US';
         utterance.rate = 0.9;
         utterance.pitch = 0.9;
         utterance.onend = () => {
-          document.getElementById('podcast-toggle').disabled = false;
+          if (!utterance.error) speakNext();
         };
-        document.getElementById('podcast-toggle').disabled = true;
+        utterance.onerror = (e) => {
+          console.error('Speech synthesis error:', e);
+          btn.disabled = false;
+        };
+        
         speechSynthesis.speak(utterance);
-      })
-      .catch(err => {
-        console.error('Failed to load or play SOUL.md:', err);
-        alert('Could not load SOUL.md for audio playback.');
-      });
-  } catch (err) {
-    console.error('Failed to load or play SOUL.md:', err);
-    alert('Could not load SOUL.md for audio playback.');
-  }
+        btn.disabled = true;
+      };
+      
+      speakNext();
+    })
+    .catch(err => {
+      console.error('Podcast failed:', err);
+      alert('Failed to load SOUL.md for audio playback. Check console for details.');
+      btn.disabled = false;
+    });
 });
 
 // === DEBUG MODE ===
diff --git a/index.html b/index.html
index 833ce1b..c351725 100644
--- a/index.html
+++ b/index.html
@@ -39,7 +39,7 @@
     <button id="podcast-toggle" class="chat-toggle-btn" aria-label="Start podcast of SOUL.md" title="Play SOUL.md as audio">
       🎧
     </button>
-    <button id="podcast-toggle" class="chat-toggle-btn" aria-label="Start podcast of SOUL.md" title="Play SOUL.md as audio podcast">
+    <button id="podcast-toggle" class="chat-toggle-btn" aria-label="Start podcast of SOUL.md" title="Play SOUL.md as audio">
       🎧
     </button>
     <button id="timelapse-btn" class="chat-toggle-btn" aria-label="Start time-lapse replay" title="Time-lapse: replay today&#39;s activity in 30s [L]">
diff --git a/style.css b/style.css
index 22c71f3..881ee8d 100644
--- a/style.css
+++ b/style.css
@@ -114,6 +114,11 @@ canvas {
   opacity: 0.6;
   cursor: not-allowed;
 }
+
+#podcast-toggle:focus {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
 #podcast-toggle:hover {
   background-color: var(--color-primary);
 }