`;
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-tip');
const pitchRow = document.getElementById('erp-pitch-row');
if (!sel) return;
sel.innerHTML = '';
if (state.voiceMode === 'local') {
if (tip) { tip.className = 'erp-tip'; tip.textContent = ''; }
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.voices.find(v => v.voiceURI === state.selectedVoiceId)) {
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.className = 'erp-tip show';
tip.textContent = '🌐 有道 / 百度 / 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;
}
}
function setTip(html, cls) {
const tip = document.getElementById('erp-tip');
if (!tip) return;
if (!html) {
if (state.voiceMode === 'online') {
tip.className = 'erp-tip show';
tip.textContent = '🌐 有道 / 百度 / Google 多引擎，失败自动降级';
} else {
tip.className = 'erp-tip';
}
return;
}
tip.className = 'erp-tip show' + (cls ? ' ' + cls : '');
tip.innerHTML = html;
}
// =====================================================
// 绑定 UI 事件
// =====================================================
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) && !fab.contains(e.target)) {
state.panelOpen = false; panel.classList.remove('open');
}
}, true);
}
// =====================================================
// 更新 UI 状态显示
// =====================================================
function updateUI() {
const playBtn = document.getElementById('erp-play');
const sdot = 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 sc = state.isPlaying ? 'playing' : state.isPaused ? 'paused' : '';
if (playBtn) { playBtn.textContent = state.isPlaying ? '⏸' : '▶'; playBtn.title = state.isPlaying ? '暂停' : state.isPaused ? '继续' : '播放'; }
if (sdot) sdot.className = 'erp-sdot' + (sc ? ' ' + sc : '');
if (fabDot) fabDot.className = 'erp-fab-dot' + (sc ? ' show ' + sc : '');
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);
});
}
// =====================================================
// Toast 提示
// =====================================================
function showToast(msg) {
let el = document.getElementById('erp-toast');
if (!el) {
el = document.createElement('div');
el.id = 'erp-toast';
Object.assign(el.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(el);
}
el.textContent = msg;
el.style.opacity = '1';
clearTimeout(el._t);
el._t = setTimeout(() => { el.style.opacity = '0'; }, 2500);
}
// =====================================================
// 键盘快捷键
// =====================================================
document.addEventListener('keydown', e => {
if (!e.altKey) return;
if (e.key === 's' || e.key === 'S') {
e.preventDefault();
if (!state.isPlaying && !state.isPaused) { state.paragraphs = extractParagraphs(); state.currentIndex = 0; }
pauseResume();
} else if (e.key === 'q' || e.key === 'Q') {
e.preventDefault(); stopAll();
} else if (e.key === 'ArrowLeft') {
e.preventDefault(); prevPara();
} else if (e.key === 'ArrowRight') {
e.preventDefault(); nextPara();
} else if (e.key === 'h' || e.key === 'H') {
e.preventDefault(); guardUI();
showToast('听书助手已唤回 🎧');
}
});
// =====================================================
// 守护（防止 SPA 路由跳转导致悬浮球消失）
// =====================================================
function guardUI() {
if (!document.body.contains(document.getElementById('erp-fab'))) {
document.getElementById('erp-panel')?.remove();
createUI();
}
}
const bodyObserver = new MutationObserver(() => {
if (!document.getElementById('erp-fab')) guardUI();
});
function startGuard() {
createUI();
bodyObserver.observe(document.body, { childList: true, subtree: false });
setInterval(guardUI, 3000);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', startGuard);
} else {
startGuard();
}
})();