diff --git a/js/compare.js b/js/compare.js index 21c8db4..7f970d2 100644 --- a/js/compare.js +++ b/js/compare.js @@ -99,18 +99,30 @@ async function doCompare(blob, originalText, duration) { 'πŸ—£ Артикуляция: ' + phon.voiceClarity + '%' + ''; - // Π‘Π»ΠΎΠ³ΠΈ β€” ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹Π΅ + // Π‘Π»ΠΎΠ³ΠΈ β€” ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹Π΅ (DOM-элСмСнты, Π½Π΅ innerHTML) _currentBlob = blob; _currentSylBuf = null; const sy = syllabifyIT(originalText); if (sy && sy.includes('-')) { const syls = sy.split('-'); - const sylHTML = '
' + - syls.map((s, i) => - '' + s + '' - ).join('Β·') + - '
'; - document.getElementById('diff').innerHTML += sylHTML; + const div = document.createElement('div'); + div.style.cssText = 'margin-top:8px;font-size:1.2em;letter-spacing:2px;user-select:none'; + syls.forEach((s, i) => { + if (i > 0) { + const sep = document.createElement('span'); + sep.style.cssText = 'color:#ccc;margin:0 1px'; + sep.textContent = 'Β·'; + div.appendChild(sep); + } + const chip = document.createElement('span'); + chip.textContent = s; + chip.style.cssText = 'cursor:pointer;padding:2px 4px;border-radius:4px;transition:background 0.15s'; + chip.onmouseover = () => { chip.style.background = '#e0e0ff'; }; + chip.onmouseout = () => { chip.style.background = ''; }; + chip.onclick = () => { chip.style.background = '#b0b0ff'; setTimeout(() => { chip.style.background = '#e0e0ff'; }, 150); playSyllable(i, syls.length); }; + div.appendChild(chip); + }); + document.getElementById('diff').appendChild(div); } setStatus('Π“ΠΎΡ‚ΠΎΠ²ΠΎ.'); diff --git a/js/main.js b/js/main.js index 840504b..2580529 100644 --- a/js/main.js +++ b/js/main.js @@ -1,6 +1,6 @@ // ---------- Π“Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ ΠΈ инициализация ---------- const GROQ_API_KEY = ''; -const VERSION = 'v65'; +const VERSION = 'v66'; let mediaRecorder, audioChunks = [], userAudioBlob = null, ttsText = ''; let isRecording = false, isAnalyzing = false, micAnalyser = null, micAnimId = null;