8 篇文章带有标签 “web-speech-api”

发布

朗读者：浏览器本地中英文长文朗读器

朗读者是什么

朗读者（Long Reader）是一款基于 Web Speech API 的纯前端长文朗读工具。它采用左侧编辑设置、右侧沉浸阅读的布局，支持中英文长文本逐句朗读，无需上传、无需后端，所有文本处理与语音合成都在浏览器本地完成。

核心功能

  • 本地朗读：文本不离开浏览器，无上传、无服务端、保护隐私。
  • 自动分句：按中英文标点自动切分长文，避免单条语音过长被截断。
  • 逐句高亮：朗读时当前句高亮显示，已读句子自动淡化，并平滑滚动到视野中央。
  • 点击跳转朗读：在阅读区点击任意句子，即可从该句开始播放。
  • 多语音选择：自动加载系统语音列表，按语言分组；英文优先推荐 Safari 的 Samantha 与 Chrome 的 Ava。
  • 语速 / 音调 / 音量调节：语速 0.5× ~ 2.0×，音调 0 ~ 2.0，音量 0% ~ 100%。
  • 文本来源多样：支持直接粘贴、上传 .txt 文件，也内置中英文范文一键体验。
  • 阅读进度记忆：使用 localStorage 保存当前文本与朗读位置，刷新或下次打开可恢复继续朗读。
  • 进度显示：顶部工具栏实时显示当前句数与总句数。
  • 响应式布局：桌面端双栏设计，移动端侧边栏可折叠，适配不同屏幕。
  • 键盘快捷键：Space 播放 / 暂停，← / → 切换上下句，Esc 停止。
  • 后台自动暂停：页面切换到后台时自动暂停朗读，避免被系统中断。

使用方式

tool browser localstorage reader speech-synthesis text-to-speech tts web-speech-api

发布

免费在线翻译工具：无需注册的多源翻译与朗读

免费在线翻译工具是什么

免费在线翻译工具是一款纯前端的浏览器翻译工具，支持 MyMemory、Lingva、LibreTranslate 三种翻译源，无需注册、无需 API Key 即可使用。它采用左右分屏设计，输入内容后会实时翻译，并支持基于 Web Speech API 的本地语音朗读。所有设置与偏好都保存在浏览器本地，文本不会上传至任何服务端。

核心功能

  • 多翻译源可选：支持 MyMemory（免费在线）、Lingva（免费代理）、LibreTranslate（自托管）三种后端，可在设置中一键切换。
  • 实时翻译：输入内容 600ms 防抖后自动发起翻译，切换语言或翻译源时也会即时更新译文。
  • 语言标签页：源语言支持「检测语言」，目标语言覆盖中文、英语、日语、德语、法语、西班牙语等常用语言。
  • 一键互换语言：点击中间互换按钮即可交换源语言与目标语言，并自动重新翻译。
  • 语音朗读：基于 Web Speech API，支持朗读原文与译文；中英文自动检测，英文优先使用 Ava / Samantha 等高质量语音。
  • 朗读播放/停止切换：朗读按钮可一键停止当前播放，再次点击则重新朗读。
  • 长文本分句：朗读时按句末标点自动切分，避免单条语音过长被浏览器截断。
  • 复制译文：点击复制按钮即可将翻译结果复制到剪贴板。
  • 本地记忆偏好：使用 localStorage 自动保存源语言、目标语言、翻译源及服务地址，下次打开无需重新设置。
  • 响应式布局：桌面端左右分屏，窗口自适应高度；移动端自动上下堆叠，小屏也能流畅使用。
tool browser localstorage machine-translation online-translator speech-synthesis translation web-speech-api

浏览器原生语音合成（TTS）开发经验

最近先后在站点上线了两个纯前端的朗读工具：Read Aloud 和 智能朗读阅读器。两者都基于浏览器的 Web Speech API 实现，没有后端、没有上传、没有第三方语音服务。开发过程中踩了一些坑，也积累了一些可复用的经验，记录如下。

一、Web Speech API 基础

浏览器 TTS 的入口非常简洁：

const synth = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance(text);
synth.speak(utterance);

window.speechSynthesis 负责全局的语音队列，SpeechSynthesisUtterance 则是每一次发音的单元。在真正可用之前，建议先做兼容性判断：

if (!window.speechSynthesis) {
  alert('当前浏览器不支持 Web Speech API，无法使用朗读功能。');
  return;
}

目前 Safari、Chrome、Edge 等现代浏览器都支持该 API，但不同浏览器在语音质量、语音名、事件触发等方面差异明显，后面会详细说。

二、语音列表是异步加载的

第一次调用 speechSynthesis.getVoices() 时，返回的数组经常为空。这是因为浏览器需要异步加载系统语音包。

ttstext-to-speechweb-speech-apispeech-synthesisbrowserfrontendjavascript
发布

智能朗读阅读器：浏览器本地中英文长文朗读工具

智能朗读阅读器是什么

智能朗读阅读器是一款基于 Web Speech API 的纯前端朗读工具。它采用左右分屏设计：左侧为阅读区，右侧为可折叠编辑区，适合朗读中文小说、英文范文、演讲稿等长文本。所有文本处理与语音合成都在浏览器本地完成，无需上传、无需后端。

核心功能

  • 左右分屏阅读：左侧阅读区、右侧可折叠编辑区，加载大文本后阅读区独立滚动，页面不再被撑高。
  • 自动分句与高亮：按中英文标点自动切分长文，朗读时当前句高亮显示，已读句子自动淡化。
  • 点击跳转朗读：在阅读区点击任意句子，即可从该句开始播放。
  • 语速 / 音调调节：语速支持 0.4x ~ 2.5x，音调支持 0.5 ~ 2.0。
  • 字号 / 行高调节：阅读区字号与行高可调，偏好自动保存到本地。
  • 语音选择：自动加载系统语音，英文文本默认优先使用 Ava 语音。
  • 上下句跳转：支持按钮或键盘 ← / → 快速切换到上一句 / 下一句。
  • 循环播放：支持单句循环与全文循环，适合重点句子跟读或反复听诵。
  • 朗读进度条：底部实时显示整体朗读进度。
  • 预设经典文本：内置《背影》、I Have a Dream、Gettysburg Address 等范文，一键体验。
  • 主题切换：支持浅色 / 深色模式，长时间阅读更护眼。
  • 文件导入：支持 .txt / .md 等文本导入，也支持拖拽文件到阅读区。
  • 快捷键：空格播放 / 暂停，Ctrl + Enter 加载文本，Esc 停止，← / → 切换句子。
  • 纯本地运行：无后端、无上传、无依赖，纯静态 HTML 页面。
tool tts text-to-speech reading-companion reader web-speech-api speech-synthesis browser localstorage

发布

高中英语3500词：浏览器本地背单词工具

高中英语3500词是什么

高中英语3500词是一款纯前端、无需安装的浏览器背单词工具。它内置高考核心词汇，采用卡片式记忆设计，支持释义隐藏、朗读、收藏标记和进度统计，所有学习状态都保存在浏览器本地。

核心功能

  • 内置高考词汇库：覆盖高中英语 3500 核心词，打开即用，无需上传词表。
  • 卡片式记忆：大字显示单词，点击卡片或按空格即可显示/隐藏中文释义。
  • 顺序与随机模式：支持顺序背诵和随机抽词，一键切换复习方式。
  • 朗读发音：基于 Web Speech API，支持单词朗读、语速调节和语音选择。
  • 自动朗读设置：可开启切换单词时自动朗读、显示释义时自动朗读。
  • 收藏/标为不熟：遇到重点或不会的单词，按 S 或点击星标收藏，便于集中复习。
  • 仅看收藏过滤：开启过滤后只显示已收藏单词，针对性巩固薄弱词汇。
  • 显示释义后自动下一个：可设置延迟时间，自动推进到下一张卡片。
  • 单词列表与搜索：侧滑单词列表支持按英文或中文释义快速搜索跳转。
  • 进度统计：顶部显示当前进度条和第几个 / 总词数。
  • 学习状态本地保存：收藏、设置、释义显示状态均通过 localStorage 保存，刷新不丢失。
  • 快捷键支持：空格/点击显示释义、← → 翻页、R 随机、P 朗读、A 自动朗读、S 收藏、L 列表、G 设置。

使用方式

  1. 打开 高中英语3500词。
  2. 点击卡片或按空格查看释义。
  3. 熟悉的词按 → 或点击"下一个 →"继续；不熟悉的词按 S 收藏。
  4. 需要听发音时，按 P 或点击 "🔊 朗读"。
  5. 想针对性复习时，打开设置开启"仅显示收藏"。
tool english-words vocabulary flashcards 背单词 web-speech-api localstorage education browser
发布

Read Aloud：浏览器本地长文朗读器

Read Aloud 是什么

Read Aloud 是一款纯前端、无需上传文本的浏览器朗读工具。它基于 Web Speech API 实现，全部文本处理与语音合成都在本地完成，适合朗读英文范文、中文小说、演讲稿、技术文档等长文本。

核心功能

  • 本地朗读：文本不离开浏览器，无上传、无服务端、保护隐私。
  • 自动分句：按段落和标点自动切分长文，避免单次文本过长被浏览器截断。
  • 当前句高亮：朗读时文本区切换为阅读视图，当前句子高亮并自动滚动到视野中央。
  • 点击跳转播放：在阅读视图中单击任意句子，即可从该句开始播放。
  • 语速与音调调节：支持 0.5x ~ 2.0x 语速调节，以及 0.5 ~ 2.0 的音调调节。
  • 多语音选择：自动根据语言选择系统语音，也支持手动切换。
  • 中英文支持：自动检测中英文比例，或手动指定中文 / 英文。
  • 进度与时间显示：实时显示当前句数、总句数和已用时间。

使用方式

  1. 打开 Read Aloud。
  2. 将需要朗读的文本粘贴到编辑区。
  3. 点击 ▶ 朗读 开始播放。
  4. 需要暂停时点击 ⏸ 暂停，或点击 ⏹ 停止 结束朗读并恢复编辑。

快捷键

  • 在编辑区内按 Ctrl / ⌘ + Space：播放 / 暂停。
  • 焦点在编辑区外时，按 Space：快速播放 / 暂停。
  • 按 Esc：关闭帮助窗口。

浏览器兼容性

Read Aloud 依赖 Web Speech API，建议使用 Safari、Chrome、Edge 等

tool tts text-to-speech read-aloud web-speech-api speech-synthesis browser local-tts
发布

极简长文朗读器：左右分屏实时朗读工具

极简长文朗读器是什么

极简长文朗读器是一款基于浏览器 Web Speech API 的本地文本朗读工具。它采用左右分屏的极简设计：左侧输入文本，右侧实时生成可朗读的阅读视图，全部处理都在浏览器内完成，无需上传、无需后端。

核心功能

  • 左右分屏实时同步：左侧编辑文本，右侧阅读视图即时解析渲染，边写边读。
  • 中英文智能识别：自动判断文本为中文还是英文，也可手动选择语种。
  • 按句高亮：朗读时当前句子以黄色高亮显示，并自动滚动到视野中央。
  • 点击跳转播放：点击阅读视图中的任意句子，即可从该句开始朗读。
  • 语速调节：支持 0.5x ~ 2.0x 语速调节，拖动滑块即可实时生效。
  • 发音人选择：自动加载系统语音，支持手动切换中英文发音人。
  • 防中断保活：针对部分浏览器长段朗读容易中断的问题，内置保活机制。
  • 内置范例：一键加载中英文示例文本，快速体验朗读效果。

与 Read Aloud 的区别

特性 极简长文朗读器 Read Aloud
界面 左右分屏，实时同步 编辑/阅读视图切换
分句 按中英文标点实时切分 段落 + 句子双层切分
音调调节 无 支持
进度显示 无 句数 / 时间
设计 极简 Tailwind 风格 卡片式工具风格

可以根据个人喜好选择更适合自己的一款，两者都是纯浏览器本地运行。

tool tts text-to-speech reader web-speech-api speech-synthesis browser minimalist 在线工具

发布

高中英语词汇速记：卡片式背单词与复习工具

高中英语词汇速记是什么

高中英语词汇速记是一款纯前端浏览器背单词工具，专为高考英语词汇复习设计。它采用卡片式翻转记忆，支持单词搜索、朗读、已会/未会标记、随机顺序和进度统计，所有学习状态保存在浏览器本地，无需安装、无需上传。

核心功能

  • 内置高考词汇库：覆盖高中英语核心词汇，打开即用。
  • 卡片式记忆：大字显示单词，点击或按 H 键显示/隐藏中文释义。
  • 搜索跳转：顶部搜索框支持按英文单词或中文释义快速定位。
  • 朗读发音：基于 Web Speech API，点击单词或按空格即可朗读，支持语速调节和语音选择。
  • 已会/未会标记：按 K 标记已会、按 M 标记未会，分类管理学习进度。
  • 学习模式过滤：设置面板支持切换"全部""仅未会""仅已会"三种学习模式。
  • 随机顺序：按 S 或点击随机按钮打乱词汇顺序，强化记忆。
  • 自动朗读：开启自动模式后，切换单词自动朗读，解放双手。
  • 字母筛选：设置面板可按首字母筛选词汇，针对性复习某字母开头的单词。
  • 进度统计：顶部实时显示当前进度、已会数量和未会数量。
  • 学习状态本地保存：标记、设置、模式均通过 localStorage 保存，刷新不丢失。
  • 快捷键支持：空格朗读、← → 翻页、H 显隐释义、K 已会、M 未会、S 随机、A 自动、/ 搜索。

使用方式

  1. 打开 高中英语词汇速记。
  2. 查看单词，不确定释义时按 H 或点击卡片显示中文。
  3. 熟悉的词按 K 标记已会，不熟悉的词按 M 标记未会。
  4. 需要听发音时按空格或点击单词/播放按钮。
  5. 想针对性复习未会单词时，打开设置切换为"仅未会"模式。
tool english-words vocabulary flashcards 背单词 web-speech-api localstorage education browser