From aba175442b30db86f99d25dc9ad0457023bfb1aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CNaeel=E2=80=9D?= Date: Fri, 22 May 2026 18:44:19 +0400 Subject: [PATCH] =?UTF-8?q?v64:=20=D1=84=D0=B8=D0=BA=D1=81=20playSyllable?= =?UTF-8?q?=20=E2=80=94=20await=20resume(),=20=D0=BE=D1=82=D0=BB=D0=B0?= =?UTF-8?q?=D0=B4=D0=BA=D0=B0,=20:active=20=D1=81=D1=82=D0=B8=D0=BB=D1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 3 ++- dist/index.html | 15 ++++++++++----- js/syllables.js | 12 ++++++++---- 3 files changed, 20 insertions(+), 10 deletions(-) diff --git a/css/style.css b/css/style.css index fd1a01f..6d0386a 100644 --- a/css/style.css +++ b/css/style.css @@ -12,5 +12,6 @@ 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; } diff --git a/dist/index.html b/dist/index.html index 6f16cc5..5218ab5 100644 --- a/dist/index.html +++ b/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; } @@ -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); } } diff --git a/js/syllables.js b/js/syllables.js index 9aa3849..460ccbf 100644 --- a/js/syllables.js +++ b/js/syllables.js @@ -28,9 +28,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; } @@ -38,12 +38,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; @@ -52,5 +55,6 @@ 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); } }