diff --git a/dist/index.html b/dist/index.html
index dbbcc47..d7a5b54 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -628,18 +628,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('ΠΠΎΡΠΎΠ²ΠΎ.');
@@ -651,7 +663,7 @@ async function doCompare(blob, originalText, duration) {