`;
document.body.appendChild(panel);
loadVoices().then(voices => {
state.voices = voices;
renderVoiceSelect();
});
bindUIEvents(fab, panel);
makeDraggable(panel, panel.querySelector('#erp-hd'));
}
// =====================================================
// 渲染音色下拉
// =====================================================
function renderVoiceSelect() {
const sel = document.getElementById('erp-voice');
const tip = document.getElementById('erp-voice-tip');
const pitchRow = document.getElementById('erp-pitch-row');
if (!sel) return;
sel.innerHTML = '';
if (state.voiceMode === 'local') {
if (tip) tip.style.display = 'none';
if (pitchRow) pitchRow.style.display = '';
const zh = state.voices.filter(v => /^(zh|cmn|yue)/i.test(v.lang));
const en = state.voices.filter(v => /^en/i.test(v.lang));
const others = state.voices.filter(v => !zh.includes(v) && !en.includes(v));
const addGroup = (label, list) => {
if (!list.length) return;
const og = document.createElement('optgroup');
og.label = label;
list.forEach(v => {
const o = document.createElement('option');
o.value = v.voiceURI;
o.textContent = getVoiceDisplayName(v);
if (v.voiceURI === state.selectedVoiceId) o.selected = true;
og.appendChild(o);
});
sel.appendChild(og);
};
addGroup('🇨🇳 中文音色', zh);
addGroup('🇺🇸 英文音色', en);
if (others.length) addGroup('🌐 其他', others);
if (!state.selectedVoiceId || state.selectedVoiceId.includes('Neural')) {
const first = zh[0] || state.voices[0];
if (first) { state.selectedVoiceId = first.voiceURI; sel.value = first.voiceURI; }
} else {
sel.value = state.selectedVoiceId;
}
} else {
// 网络音色
if (pitchRow) pitchRow.style.display = 'none';
if (tip) {
tip.style.display = 'block';
tip.className = 'erp-online-tip';
tip.innerHTML = '🌐 有道 / 百度 / Google 多引擎，自动降级切换';
}
// 按引擎分组
const groups = { '📖 有道 TTS': [], '🔵 百度 TTS': [], '🌍 Google TTS': [] };
ONLINE_VOICES.forEach(v => {
const g = v.engine === 'youdao' ? '📖 有道 TTS' : v.engine === 'baidu' ? '🔵 百度 TTS' : '🌍 Google TTS';
groups[g].push(v);
});
Object.entries(groups).forEach(([label, list]) => {
if (!list.length) return;
const og = document.createElement('optgroup');
og.label = label;
list.forEach(v => {
const o = document.createElement('option');
o.value = v.id;
o.textContent = v.name;
if (v.id === state.selectedVoiceId) o.selected = true;
og.appendChild(o);
});
sel.appendChild(og);
});
if (!state.selectedVoiceId || !ONLINE_VOICES.find(v => v.id === state.selectedVoiceId)) {
state.selectedVoiceId = ONLINE_VOICES[0].id;
sel.value = state.selectedVoiceId;
} else {
sel.value = state.selectedVoiceId;
}
}
}
// =====================================================
// 设置网络音色提示文字
// =====================================================
function setOnlineTip(html, cls) {
const tip = document.getElementById('erp-voice-tip');
if (!tip) return;
if (!html) { if (state.voiceMode === 'online') { tip.style.display='block'; tip.className='erp-online-tip'; tip.innerHTML='🌐 有道 / 百度 / Google 多引擎，自动降级切换'; } return; }
tip.style.display = 'block';
tip.className = 'erp-online-tip' + (cls ? ' ' + cls : '');
tip.innerHTML = html;
}
// =====================================================
// 绑定事件
// =====================================================
function bindUIEvents(fab, panel) {
const $ = id => document.getElementById(id);
fab.addEventListener('click', () => {
state.panelOpen = !state.panelOpen;
panel.classList.toggle('open', state.panelOpen);
});
$('erp-close').addEventListener('click', () => {
state.panelOpen = false;
panel.classList.remove('open');
});
$('erp-play').addEventListener('click', () => {
if (!state.isPlaying && !state.isPaused) {
state.paragraphs = extractParagraphs();
state.currentIndex = 0;
}
pauseResume();
});
$('erp-stop').addEventListener('click', stopAll);
$('erp-prev').addEventListener('click', prevPara);
$('erp-next').addEventListener('click', nextPara);
// 音色模式 Tab
panel.querySelectorAll('.erp-tab').forEach(tab => {
tab.addEventListener('click', () => {
panel.querySelectorAll('.erp-tab').forEach(t => t.classList.remove('active'));
tab.classList.add('active');
state.voiceMode = tab.dataset.mode;
GM_setValue('voiceMode', state.voiceMode);
renderVoiceSelect();
if (state.isPlaying || state.isPaused) {
const idx = state.currentIndex;
stopAll();
state.isPlaying = true;
speak(idx);
}
});
});
// 音色选择
$('erp-voice').addEventListener('change', e => {
state.selectedVoiceId = e.target.value;
GM_setValue('selectedVoiceId', state.selectedVoiceId);
if (state.isPlaying || state.isPaused) {
const idx = state.currentIndex;
stopAll();
state.isPlaying = true;
speak(idx);
}
});
// 语速
$('erp-rate').addEventListener('input', e => {
state.rate = parseFloat(e.target.value);
$('erp-rate-v').textContent = state.rate.toFixed(1) + 'x';
GM_setValue('rate', String(state.rate));
if (state.isPlaying || state.isPaused) {
const idx = state.currentIndex;
stopAll(); state.isPlaying = true; speak(idx);
}
});
// 音调（仅本地模式）
$('erp-pitch').addEventListener('input', e => {
state.pitch = parseFloat(e.target.value);
$('erp-pitch-v').textContent = state.pitch.toFixed(1);
GM_setValue('pitch', String(state.pitch));
if ((state.isPlaying || state.isPaused) && state.voiceMode === 'local') {
const idx = state.currentIndex;
stopAll(); state.isPlaying = true; speak(idx);
}
});
// 音量
$('erp-vol').addEventListener('input', e => {
state.volume = parseFloat(e.target.value);
$('erp-vol-v').textContent = Math.round(state.volume * 100) + '%';
GM_setValue('volume', String(state.volume));
if (state.audioEl) state.audioEl.volume = state.volume;
if (state.utterance) state.utterance.volume = state.volume;
});
// 点击面板外关闭
document.addEventListener('click', e => {
if (state.panelOpen && !panel.contains(e.target) && e.target !== fab && !fab.contains(e.target)) {
state.panelOpen = false;
panel.classList.remove('open');
}
}, true);
}
// =====================================================
// 更新 UI 状态
// =====================================================
function updateUI() {
const playBtn = document.getElementById('erp-play');
const dot = document.getElementById('erp-sdot');
const fabDot = document.getElementById('erp-fab-dot');
const fill = document.getElementById('erp-fill');
const pinfo = document.getElementById('erp-pinfo');
const ppct = document.getElementById('erp-ppct');
const stateClass = state.isPlaying ? 'playing' : state.isPaused ? 'paused' : '';
if (playBtn) { playBtn.textContent = state.isPlaying ? '⏸' : '▶'; playBtn.title = state.isPlaying ? '暂停' : state.isPaused ? '继续' : '播放'; }
if (dot) dot.className = 'erp-status-dot' + (stateClass ? ' ' + stateClass : '');
if (fabDot) fabDot.className = 'erp-fab-dot' + (stateClass ? ' show ' + stateClass : '');
const total = state.paragraphs.length;
const cur = state.currentIndex;
if (total > 0) {
const pct = Math.round(((cur + 1) / total) * 100);
if (fill) fill.style.width = pct + '%';
if (pinfo) pinfo.textContent = `第 ${cur + 1} / ${total} 段`;
if (ppct) ppct.textContent = pct + '%';
} else {
if (fill) fill.style.width = '0%';
if (pinfo) pinfo.textContent = '点击播放开始听书';
if (ppct) ppct.textContent = '';
}
}
// =====================================================
// 拖拽
// =====================================================
function makeDraggable(el, handle) {
let sx, sy, sl, st;
handle.addEventListener('mousedown', e => {
if (e.target.closest('button')) return;
sx = e.clientX; sy = e.clientY;
const r = el.getBoundingClientRect();
sl = r.left; st = r.top;
const onMove = e => {
el.style.left = (sl + e.clientX - sx) + 'px';
el.style.top = (st + e.clientY - sy) + 'px';
el.style.right = 'auto'; el.style.bottom = 'auto';
};
const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
document.addEventListener('mousemove', onMove);
document.addEventListener('mouseup', onUp);
});
}
// =====================================================
// 小提示
// =====================================================
function showTip(msg) {
let tip = document.getElementById('erp-toast');
if (!tip) {
tip = document.createElement('div');
tip.id = 'erp-toast';
Object.assign(tip.style, { position:'fixed', bottom:'100px', left:'50%', transform:'translateX(-50%)', background:'rgba(0,0,0,0.75)', color:'#fff', padding:'8px 18px', borderRadius:'20px', fontSize:'13px', zIndex:'2147483647', fontFamily:'sans-serif', pointerEvents:'none', transition:'opacity 0.3s' });
document.body.appendChild(tip);
}
tip.textContent = msg;
tip.style.opacity = '1';
clearTimeout(tip._t);
tip._t = setTimeout(() => { tip.style.opacity = '0'; }, 2500);
}
// =====================================================
// 键盘快捷键
// =====================================================
document.addEventListener('keydown', e => {
if (e.altKey && e.key === 's') {
e.preventDefault();
if (!state.isPlaying && !state.isPaused) { state.paragraphs = extractParagraphs(); state.currentIndex = 0; }
pauseResume();
}
if (e.altKey && e.key === 'q') { e.preventDefault(); stopAll(); }
if (e.altKey && e.key === 'ArrowLeft') { e.preventDefault(); prevPara(); }
if (e.altKey && e.key === 'ArrowRight') { e.preventDefault(); nextPara(); }
// Alt+H：强制唤回悬浮球（找不到时重建）
if (e.altKey && (e.key === 'h' || e.key === 'H')) {
e.preventDefault();
guardUI();
const fab = document.getElementById('erp-fab');
if (fab) { fab.style.setProperty('visibility','visible','important'); showTip('听书助手已唤回 🎧'); }
}
});
// =====================================================
// 启动 + 守护（防止 SPA 路由跳转或页面 DOM 清空导致悬浮球消失）
// =====================================================
function guardUI() {
// 若悬浮球或宿主被移除，重建
if (!document.getElementById('erp-fab') || !document.body.contains(document.getElementById('erp-fab'))) {
const old = document.getElementById('erp-panel');
if (old) old.remove();
const oldHost = document.getElementById('erp-host');
if (oldHost) oldHost.remove();
createUI();
} else {
// 悬浮球存在但可能被隐藏，强制可见
const fab = document.getElementById('erp-fab');
if (fab) {
fab.style.setProperty('visibility', 'visible', 'important');
fab.style.setProperty('opacity', '1', 'important');
fab.style.setProperty('display', 'flex', 'important');
fab.style.setProperty('pointer-events', 'auto', 'important');
fab.style.setProperty('position', 'fixed', 'important');
fab.style.setProperty('bottom', '28px', 'important');
fab.style.setProperty('right', '28px', 'important');
fab.style.setProperty('z-index', '2147483646', 'important');
}
}
}
// MutationObserver：监听 body 子节点变化
const bodyObserver = new MutationObserver(() => {
if (!document.getElementById('erp-fab')) guardUI();
});
function startGuard() {
createUI();
if (document.body) {
bodyObserver.observe(document.body, { childList: true, subtree: false });
}
// 定时兜底，每 3 秒检查一次
setInterval(guardUI, 3000);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', startGuard);
} else {
startGuard();
}
})();