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;