news 2026/9/7 12:06:00

监听 edge大声朗读 样式变化

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
监听 edge大声朗读 样式变化
<msreadoutspan class="msreadout-line-highlight msreadout-inactive-highlight">黛玉方进入房时,只见两个人搀着一位鬓发如银的老母迎上来,黛玉便<msreadoutspan class="msreadout-word-highlight">知</msreadoutspan>是他</msreadoutspan> <msreadoutspan class="msreadout-line-highlight msreadout-inactive-highlight">黛玉一一拜见过。贾母又说:“请姑娘们来。今日远客才来,<msreadoutspan class="msreadout-word-highlight">可以</msreadoutspan>不必上学去</msreadoutspan>

<p>“血米放在陈家,又不会跑,何况族中还有着贺章族 <msreadoutspan class="msreadout-line-highlight"> 叔,家族随时都可 <msreadoutspan class="msreadout-word-highlight">动手</msreadoutspan> 。” </msreadoutspan> </p>

目的是将edge朗读的内容,发送到 有声小说书屋软件中,显示

方案一:

// 防止重复处理:改用文本内容作为 key(避免 DOM 元素重建导致重复) const processedTexts = new Set(); // 判断是否是“行级”朗读片段 function isLineSpan(el) { return ( el.tagName?.toLowerCase() === 'msreadoutspan' && el.classList.contains('msreadout-line-highlight') ); } // 全局变量:用于缓冲和定时器 let sentenceBuffer = []; let sendTimer = null; const SEND_DELAY = 150; // 合并窗口:150ms // 判断两个字符串之间是否应加空格(仅当前后都是英文字母时) function shouldAddSpace(prev, current) { if (!prev || !current) return false; const lastChar = prev[prev.length - 1]; const firstChar = current[0]; const isEnglishLetter = /[a-zA-Z]/; return isEnglishLetter.test(lastChar) && isEnglishLetter.test(firstChar); } // 处理一个朗读片段 function processLineSpan(span) { const fullText = span.textContent.trim(); if (!fullText) return; // ✅ 关键:用文本内容防重(不是 DOM 元素) if (processedTexts.has(fullText)) { // console.log('⏭️ 跳过重复文本:', fullText); return; } // 添加到已处理集合 processedTexts.add(fullText); // 防内存泄漏:只保留最近 50 条 if (processedTexts.size > 50) { const arr = Array.from(processedTexts); processedTexts.clear(); arr.slice(-30).forEach(t => processedTexts.add(t)); // 保留最近 30 条 } console.log('📜 收到片段:', fullText); sentenceBuffer.push(fullText); // 重置发送定时器 if (sendTimer) clearTimeout(sendTimer); sendTimer = setTimeout(() => { // 智能拼接句子 let combinedText = ''; for (let i = 0; i < sentenceBuffer.length; i++) { if (i === 0) { combinedText = sentenceBuffer[i]; } else { if (shouldAddSpace(sentenceBuffer[i - 1], sentenceBuffer[i])) { combinedText += ' ' + sentenceBuffer[i]; } else { combinedText += sentenceBuffer[i]; } } } // 清空缓冲区 sentenceBuffer = []; if (combinedText) { console.log('📤 发送完整句子:', combinedText); sendToTtsServer(combinedText); } }, SEND_DELAY); } // 发送文本到本地 TTS 服务 function sendToTtsServer(text) { fetch('http://127.0.0.1:8088/tts', { method: 'POST', body: text, headers: { 'Content-Type': 'text/plain; charset=utf-8' } }) .then(response => response.ok ? response.text() : Promise.reject(response.status)) .then(data => console.log('📡 服务器响应:', data)) .catch(error => console.error('💥 网络错误:无法连接到“有声小说书屋”程序', error)); } // 监听 DOM 变化 const observer = new MutationObserver(mutations => { for (const mutation of mutations) { if (mutation.type === 'childList') { for (const node of mutation.addedNodes) { if (node.nodeType === Node.ELEMENT_NODE) { // 如果新节点本身就是目标 span if (isLineSpan(node)) { processLineSpan(node); } // 如果新节点内部包含目标 span if (node.querySelectorAll) { try { node.querySelectorAll('msreadoutspan.msreadout-line-highlight').forEach(processLineSpan); } catch (e) { // 降级:某些环境可能不支持自定义标签选择器 const walk = (el) => { if (isLineSpan(el)) processLineSpan(el); el.children?.forEach(walk); }; walk(node); } } } } } } }); // 扫描页面中已存在的朗读行 document.querySelectorAll('msreadoutspan.msreadout-line-highlight').forEach(processLineSpan); // 开始监听整个页面 observer.observe(document.body, { childList: true, subtree: true }); console.log('监听页面朗读行(含嵌套)已启动...');

方案二;

// 防止重复处理:记录已处理的外层 line span 元素 const processedLineSpans = new Set(); // 判断是否是“完整句子”的外层容器 function isLineContainer(el) { return ( el.tagName?.toLowerCase() === 'msreadoutspan' && el.classList.contains('msreadout-line-highlight') ); } // 发送完整句子到 TTS 服务 function sendToTtsServer(text) { if (!text.trim()) return; fetch('http://127.0.0.1:8088/tts', { method: 'POST', body: text, headers: { 'Content-Type': 'text/plain; charset=utf-8' } }) .then(response => response.ok ? response.text() : Promise.reject(response.status)) .then(data => console.log('📡 TTS 发送成功:', data)) .catch(error => console.error('💥 网络错误:无法连接到“有声小说书屋”程序', error)); } // 处理一个完整的句子容器 function processLineContainer(span) { if (processedLineSpans.has(span)) return; processedLineSpans.add(span); // ✅ 关键:textContent 自动合并所有嵌套文本(忽略内部标签) const fullText = span.textContent.trim(); if (fullText) { console.log('📤 发送完整句子:', fullText); sendToTtsServer(fullText); } } // MutationObserver:监听新插入的节点 const observer = new MutationObserver(mutations => { for (const mutation of mutations) { if (mutation.type === 'childList') { for (const node of mutation.addedNodes) { if (node.nodeType === Node.ELEMENT_NODE) { // 如果新节点本身就是 line 容器 if (isLineContainer(node)) { processLineContainer(node); } // 如果新节点内部包含 line 容器(比如批量插入) if (node.querySelectorAll) { try { node.querySelectorAll('msreadoutspan.msreadout-line-highlight') .forEach(processLineContainer); } catch (e) { // 降级遍历(兼容性兜底) const walk = (el) => { if (isLineContainer(el)) processLineContainer(el); el.children?.forEach(walk); }; walk(node); } } } } } } }); // 扫描页面中已存在的完整句子(防止遗漏初始内容) document.querySelectorAll('msreadoutspan.msreadout-line-highlight') .forEach(processLineContainer); // 开始监听整个页面 observer.observe(document.body, { childList: true, subtree: true }); console.log('监听页面完整朗读行(一次性发送)已启动...');

方案三

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/9/6 21:19:03

LobeChat能否接入语音合成TTS?全流程语音交互实现

LobeChat能否接入语音合成TTS&#xff1f;全流程语音交互实现 在智能助手日益融入日常生活的今天&#xff0c;用户早已不满足于“打字提问、看屏回复”的传统交互模式。想象这样一个场景&#xff1a;你正在厨房手忙脚乱地切菜&#xff0c;却想查一道菜谱步骤——如果只需说一句…

作者头像 李华
网站建设 2026/9/7 17:15:07

Linly-Talker:开源数字人能否撼动Synthesia?

Linly-Talker&#xff1a;当开源数字人开始“说话” 在一家创业公司的产品发布会上&#xff0c;没有真人出镜&#xff0c;也没有摄影团队。主讲人是一位面容亲切的虚拟女性&#xff0c;她用自然的语调介绍着新功能&#xff0c;嘴角随着话语微微上扬&#xff0c;眼神仿佛真的在与…

作者头像 李华
网站建设 2026/9/7 9:12:01

ASCOMP Image Former:轻量高效的图像处理工具,支持批量编辑与滤镜特效

ASCOMP Image Former Pro是一款专注于图像编辑和优化的轻量级软件&#xff0c;以其简洁的界面和实用的功能集在图像处理领域占有一席之地。该软件通过提供基础的编辑工具和丰富的滤镜效果&#xff0c;满足了用户日常图像处理的基本需求&#xff0c;特别适合需要快速处理图片的非…

作者头像 李华
网站建设 2026/9/7 16:55:56

Flutter:构建高性能跨平台应用的未来之选

Flutter&#xff1a;构建高性能跨平台应用的未来之选 引言 在移动开发领域&#xff0c;开发者长期以来面临着一个两难选择&#xff1a;是使用原生技术&#xff08;如 Swift/Kotlin&#xff09;获得最佳性能&#xff0c;还是采用跨平台方案&#xff08;如 React Native&#x…

作者头像 李华
网站建设 2026/9/7 5:45:54

gpt-oss-20b RESTful API设计与集成指南

gpt-oss-20b RESTful API设计与集成指南 在本地化AI部署需求日益增长的今天&#xff0c;越来越多开发者面临一个核心挑战&#xff1a;如何在有限硬件资源下运行高性能语言模型&#xff1f;尤其当消费级设备普遍仅配备16GB内存时&#xff0c;传统大模型往往难以启动。正是在这种…

作者头像 李华
网站建设 2026/9/7 10:15:45

ComfyUI安装全指南:国内加速与GitHub配置

ComfyUI 安装全指南&#xff1a;国内加速与 GitHub 配置 在 AI 图像生成领域&#xff0c;ComfyUI 正迅速成为高级用户和开发者的首选工具。它不像传统 WebUI 那样依赖固定的按钮和界面操作&#xff0c;而是通过“节点式工作流”将整个生成过程拆解成可拖拽、可复用的模块——就…

作者头像 李华