From 67b82c726e54b2a7f824cd65782e64ae0c75f9e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CNaeel=E2=80=9D?= <tazet@narod.ru>
Date: Fri, 22 May 2026 19:05:17 +0400
Subject: [PATCH] =?UTF-8?q?v70:=20=D1=82=D0=B8=D1=80=D0=B5=20=D0=BC=D0=B5?=
 =?UTF-8?q?=D0=B6=D0=B4=D1=83=20=D1=81=D0=BB=D0=BE=D0=B3=D0=B0=D0=BC=D0=B8?=
 =?UTF-8?q?=20+=20onclick=20=E2=80=94=20playHistorySyl=20=D0=B8=D0=B7=20In?=
 =?UTF-8?q?dexedDB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dist/index.html | 31 +++++++++++++++++++++----------
 js/compare.js   |  2 +-
 js/main.js      |  2 +-
 js/storage.js   |  7 ++++---
 js/syllables.js | 20 +++++++++++++++-----
 5 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 2a30556..479df76 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -118,11 +118,12 @@ async function renderRecHistory() {
           r.transcription.split(/\s+/).map(w => {
             const sy = syllabifyIT(w);
             if (sy.includes('-')) {
-              return sy.split('-').map(s =>
+              return sy.split('-').map((s,si) =>
                 '<span style="cursor:pointer;padding:0 2px;border-radius:3px"' +
                 ' onmouseover="this.style.background=\'#ffeb3b\'"' +
-                ' onmouseout="this.style.background=\'\'">' + s + '</span>'
-              ).join('<span style="color:#ccc">·</span>');
+                ' onmouseout="this.style.background=\'\'"' +
+                ' onclick="playHistorySyl(' + r.id + ',' + si + ',' + sy.split('-').length + ')">' + s + '</span>'
+              ).join('<span style="color:#ccc">-</span>');
             }
             return w;
           }).join(' ') +
@@ -216,15 +217,12 @@ let _currentBlob = null;
 let _currentSylBuf = null;
 
 async function playSyllable(sylIdx, total) {
-  console.log('[SYL] click', sylIdx, '/', total, 'blob=', !!_currentBlob);
   if (!_currentBlob) return;
   try {
     const ctx = await getAudioCtx();
-    console.log('[SYL] ctx.state=', ctx.state);
     if (!_currentSylBuf) {
       const ab = await _currentBlob.arrayBuffer();
       _currentSylBuf = await ctx.decodeAudioData(ab);
-      console.log('[SYL] decoded', _currentSylBuf.duration.toFixed(1) + 's');
     }
     const dur = _currentSylBuf.duration;
     const start = (dur / total) * sylIdx;
@@ -233,8 +231,21 @@ async function playSyllable(sylIdx, total) {
     src.buffer = _currentSylBuf;
     src.connect(ctx.destination);
     src.start(0, start, len);
-    console.log('[SYL] playing', start.toFixed(2) + 's-' + (start+len).toFixed(2) + 's');
-  } catch(e) { console.log('[SYL] ERR', e); }
+  } catch(e) {}
+}
+
+// Проигрывание слога из истории (загрузка blob из IndexedDB)
+async function playHistorySyl(recId, sylIdx, total) {
+  try {
+    const db = await openRecDB();
+    const tx = db.transaction('recs', 'readonly');
+    const store = tx.objectStore('recs');
+    const rec = await new Promise(r => { const req = store.get(recId); req.onsuccess = () => r(req.result); });
+    if (!rec?.blob) return;
+    _currentBlob = rec.blob;
+    _currentSylBuf = null;
+    await playSyllable(sylIdx, total);
+  } catch(e) {}
 }
 
 </script>
@@ -659,7 +670,7 @@ async function doCompare(blob, originalText, duration) {
       if (i > 0) {
         const sep = document.createElement('span');
         sep.style.cssText = 'color:#ccc;margin:0 1px';
-        sep.textContent = '·';
+        sep.textContent = '-';
         div.appendChild(sep);
       }
       const chip = document.createElement('span');
@@ -682,7 +693,7 @@ async function doCompare(blob, originalText, duration) {
 <script>
 // ---------- Глобальные переменные и инициализация ----------
 const GROQ_API_KEY = '';
-const VERSION = 'v69';
+const VERSION = 'v70';
 
 let mediaRecorder, audioChunks = [], userAudioBlob = null, ttsText = '';
 let isRecording = false, isAnalyzing = false, micAnalyser = null, micAnimId = null;
diff --git a/js/compare.js b/js/compare.js
index 52b1ac9..917fee4 100644
--- a/js/compare.js
+++ b/js/compare.js
@@ -113,7 +113,7 @@ async function doCompare(blob, originalText, duration) {
       if (i > 0) {
         const sep = document.createElement('span');
         sep.style.cssText = 'color:#ccc;margin:0 1px';
-        sep.textContent = '·';
+        sep.textContent = '-';
         div.appendChild(sep);
       }
       const chip = document.createElement('span');
diff --git a/js/main.js b/js/main.js
index 03f6d01..9ce6e55 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,6 +1,6 @@
 // ---------- Глобальные переменные и инициализация ----------
 const GROQ_API_KEY = '';
-const VERSION = 'v69';
+const VERSION = 'v70';
 
 let mediaRecorder, audioChunks = [], userAudioBlob = null, ttsText = '';
 let isRecording = false, isAnalyzing = false, micAnalyser = null, micAnimId = null;
diff --git a/js/storage.js b/js/storage.js
index 00e54db..2b68249 100644
--- a/js/storage.js
+++ b/js/storage.js
@@ -61,11 +61,12 @@ async function renderRecHistory() {
           r.transcription.split(/\s+/).map(w => {
             const sy = syllabifyIT(w);
             if (sy.includes('-')) {
-              return sy.split('-').map(s =>
+              return sy.split('-').map((s,si) =>
                 '<span style="cursor:pointer;padding:0 2px;border-radius:3px"' +
                 ' onmouseover="this.style.background=\'#ffeb3b\'"' +
-                ' onmouseout="this.style.background=\'\'">' + s + '</span>'
-              ).join('<span style="color:#ccc">·</span>');
+                ' onmouseout="this.style.background=\'\'"' +
+                ' onclick="playHistorySyl(' + r.id + ',' + si + ',' + sy.split('-').length + ')">' + s + '</span>'
+              ).join('<span style="color:#ccc">-</span>');
             }
             return w;
           }).join(' ') +
diff --git a/js/syllables.js b/js/syllables.js
index 460ccbf..8928caf 100644
--- a/js/syllables.js
+++ b/js/syllables.js
@@ -38,15 +38,12 @@ let _currentBlob = null;
 let _currentSylBuf = null;
 
 async function playSyllable(sylIdx, total) {
-  console.log('[SYL] click', sylIdx, '/', total, 'blob=', !!_currentBlob);
   if (!_currentBlob) return;
   try {
     const ctx = await getAudioCtx();
-    console.log('[SYL] ctx.state=', ctx.state);
     if (!_currentSylBuf) {
       const ab = await _currentBlob.arrayBuffer();
       _currentSylBuf = await ctx.decodeAudioData(ab);
-      console.log('[SYL] decoded', _currentSylBuf.duration.toFixed(1) + 's');
     }
     const dur = _currentSylBuf.duration;
     const start = (dur / total) * sylIdx;
@@ -55,6 +52,19 @@ async function playSyllable(sylIdx, total) {
     src.buffer = _currentSylBuf;
     src.connect(ctx.destination);
     src.start(0, start, len);
-    console.log('[SYL] playing', start.toFixed(2) + 's-' + (start+len).toFixed(2) + 's');
-  } catch(e) { console.log('[SYL] ERR', e); }
+  } catch(e) {}
+}
+
+// Проигрывание слога из истории (загрузка blob из IndexedDB)
+async function playHistorySyl(recId, sylIdx, total) {
+  try {
+    const db = await openRecDB();
+    const tx = db.transaction('recs', 'readonly');
+    const store = tx.objectStore('recs');
+    const rec = await new Promise(r => { const req = store.get(recId); req.onsuccess = () => r(req.result); });
+    if (!rec?.blob) return;
+    _currentBlob = rec.blob;
+    _currentSylBuf = null;
+    await playSyllable(sylIdx, total);
+  } catch(e) {}
 }