Nail/lang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v66: слоги через DOM+onmouseover/onclick — надёжнее innerHTML

Browse Source
This commit is contained in:
“Naeel”
2026-05-22 18:52:10 +04:00
parent abb943dd52
commit 77a75235ad
3 changed files with 40 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.html
Vendored
+20 -8
View File
@@ -628,18 +628,30 @@ async function doCompare(blob, originalText, duration) {
'<span>🗣 Артикуляция: ' + phon.voiceClarity + '%</span>' +
'</div>';
// Слоги — кликабельные
// Слоги — кликабельные (DOM-элементы, не innerHTML)
_currentBlob = blob;
_currentSylBuf = null;
const sy = syllabifyIT(originalText);
if (sy && sy.includes('-')) {
const syls = sy.split('-');
const sylHTML = '<div style="margin-top:8px;font-size:1.2em;letter-spacing:2px">' +
syls.map((s, i) =>
'<span class="syl-chip" onclick="playSyllable(' + i + ',' + syls.length + ')">' + s + '</span>'
).join('<span style="color:#ccc">·</span>') +
'</div>';
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) {
<script>
// ---------- Глобальные переменные и инициализация ----------
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;
js/compare.js
+19 -7
View File
@@ -99,18 +99,30 @@ async function doCompare(blob, originalText, duration) {
'<span>🗣 Артикуляция: ' + phon.voiceClarity + '%</span>' +
'</div>';
// Слоги — кликабельные
// Слоги — кликабельные (DOM-элементы, не innerHTML)
_currentBlob = blob;
_currentSylBuf = null;
const sy = syllabifyIT(originalText);
if (sy && sy.includes('-')) {
const syls = sy.split('-');
const sylHTML = '<div style="margin-top:8px;font-size:1.2em;letter-spacing:2px">' +
syls.map((s, i) =>
'<span class="syl-chip" onclick="playSyllable(' + i + ',' + syls.length + ')">' + s + '</span>'
).join('<span style="color:#ccc">·</span>') +
'</div>';
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('Готово.');
js/main.js
+1 -1
View File
@@ -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;