v64: фикс playSyllable — await resume(), отладка, :active стиль

dist/index.html

@@ -22,8 +22,9 @@ button:disabled { background:#ccc; cursor:not-allowed; }
 .phonetics { font-size:0.85em; color:#666; margin-top:6px; display:flex; gap:16px; flex-wrap:wrap; }
 .recItem { display:flex; align-items:center; gap:8px; padding:4px 8px; background:#f0f0f5; border-radius:8px; margin:4px 0; }
 .recItem button { font-size:0.8em; padding:4px 10px; }
-.syl-chip { cursor:pointer; padding:2px 4px; border-radius:4px; transition:0.15s; }
+.syl-chip { cursor:pointer; padding:2px 4px; border-radius:4px; transition:0.15s; user-select:none; }
 .syl-chip:hover { background:#e0e0ff; }
+.syl-chip:active { background:#b0b0ff; }
 
 </style>
 </head>
@@ -188,9 +189,9 @@ function syllabifyPhrase(text) {
 
 // ---------- AudioContext для проигрывания слогов ----------
 let _audioCtx = null;
-function getAudioCtx() {
+async function getAudioCtx() {
   if (!_audioCtx) _audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-  if (_audioCtx.state === 'suspended') _audioCtx.resume();
+  if (_audioCtx.state === 'suspended') await _audioCtx.resume();
   return _audioCtx;
 }
 
@@ -198,12 +199,15 @@ let _currentBlob = null;
 let _currentSylBuf = null;
 
 async function playSyllable(sylIdx, total) {
+  console.log('[SYL] click', sylIdx, '/', total, 'blob=', !!_currentBlob);
   if (!_currentBlob) return;
-  const ctx = getAudioCtx();
   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;
@@ -212,7 +216,8 @@ async function playSyllable(sylIdx, total) {
     src.buffer = _currentSylBuf;
     src.connect(ctx.destination);
     src.start(0, start, len);
-  } catch(e) { console.log('playSyllable ERR', e); }
+    console.log('[SYL] playing', start.toFixed(2) + 's-' + (start+len).toFixed(2) + 's');
+  } catch(e) { console.log('[SYL] ERR', e); }
 }
 
 </script>