${currentDelay.toFixed(3)}s
点击下方「开始检测」，自动计算精确延迟值
等待视频播放...
快捷键：← 减0.001s | → 加0.001s | 空格 重置
`;
document.body.appendChild(panel);
bindPanelEvents(panel);
makePanelDraggable(panel);
}
function bindPanelEvents(panel) {
// 滑块调节
const slider = document.getElementById('delay-slider');
slider.addEventListener('input', (e) => {
updateDelay(parseFloat(e.target.value));
});
// 三档调节按钮
document.getElementById('btn-minus-coarse').addEventListener('click', () => updateDelay(currentDelay - STEP_COARSE));
document.getElementById('btn-minus-mid').addEventListener('click', () => updateDelay(currentDelay - STEP_MID));
document.getElementById('btn-minus-fine').addEventListener('click', () => updateDelay(currentDelay - STEP_FINE));
document.getElementById('btn-plus-fine').addEventListener('click', () => updateDelay(currentDelay + STEP_FINE));
document.getElementById('btn-plus-mid').addEventListener('click', () => updateDelay(currentDelay + STEP_MID));
document.getElementById('btn-plus-coarse').addEventListener('click', () => updateDelay(currentDelay + STEP_COARSE));
// 重置和测试
document.getElementById('btn-reset').addEventListener('click', () => updateDelay(0));
document.getElementById('btn-test').addEventListener('click', playTestSound);
// 智能检测按钮
document.getElementById('btn-detect-start').addEventListener('click', startDetection);
document.getElementById('btn-detect-sound').addEventListener('click', markSound);
document.getElementById('btn-detect-video').addEventListener('click', markVideo);
document.getElementById('btn-detect-apply').addEventListener('click', applyCalculatedDelay);
// 折叠/展开
document.getElementById('collapse-btn').addEventListener('click', () => {
isPanelCollapsed = !isPanelCollapsed;
panel.classList.toggle('collapsed', isPanelCollapsed);
document.getElementById('collapse-btn').textContent = isPanelCollapsed ? '□' : '—';
});
// 关闭面板
document.getElementById('close-btn').addEventListener('click', () => {
panel.style.display = 'none';
});
// 键盘快捷键（微调精度）
document.addEventListener('keydown', (e) => {
if (['INPUT', 'TEXTAREA', 'SELECT'].includes(e.target.tagName)) return;
switch (e.key) {
case 'ArrowLeft':
e.preventDefault();
updateDelay(currentDelay - STEP_FINE);
break;
case 'ArrowRight':
e.preventDefault();
updateDelay(currentDelay + STEP_FINE);
break;
case ' ':
e.preventDefault();
updateDelay(0);
break;
}
});
}
function makePanelDraggable(panel) {
const header = panel.querySelector('.panel-header');
let isDragging = false;
let offsetX, offsetY;
header.addEventListener('mousedown', (e) => {
isDragging = true;
const rect = panel.getBoundingClientRect();
offsetX = e.clientX - rect.left;
offsetY = e.clientY - rect.top;
panel.style.cursor = 'grabbing';
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const x = e.clientX - offsetX;
const y = e.clientY - offsetY;
panel.style.left = `${x}px`;
panel.style.top = `${y}px`;
panel.style.right = 'auto';
});
document.addEventListener('mouseup', () => {
isDragging = false;
panel.style.cursor = 'default';
});
}
function playTestSound() {
const { audioCtx } = initAudioContext();
if (!audioCtx) return;
const oscillator = audioCtx.createOscillator();
const gainNode = audioCtx.createGain();
oscillator.type = 'sine';
oscillator.frequency.value = 800;
gainNode.gain.setValueAtTime(0.3, audioCtx.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.1);
oscillator.connect(gainNode);
gainNode.connect(globalDelayNode);
oscillator.start(audioCtx.currentTime);
oscillator.stop(audioCtx.currentTime + 0.1);
}
function updateStatusTip(text) {
const tipEl = document.getElementById('status-tip');
if (tipEl) tipEl.textContent = text;
}
// ========== 7. 全局监听 ==========
function observeVideos() {
document.querySelectorAll('video').forEach(hookVideo);
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutation.addedNodes.forEach((node) => {
if (node.nodeType !== 1) return;
if (node.tagName === 'VIDEO') {
hookVideo(node);
}
node.querySelectorAll('video').forEach(hookVideo);
});
});
});
observer.observe(document.body, {
childList: true,
subtree: true
});
}
// ========== 8. 初始化执行 ==========
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
buildPanel();
observeVideos();
});
} else {
buildPanel();
observeVideos();
}
window.addEventListener('beforeunload', () => {
hookedVideos.forEach((data) => data.source.disconnect());
if (audioCtx) audioCtx.close();
});
})();