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); } }