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

朗读者是什么

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

核心功能

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

使用方式

  1. 打开 朗读者。
  2. 在左侧粘贴需要朗读的文本，或点击「上传 txt」导入文件，也可载入内置范文。
  3. 选择喜欢的语音，调整语速、音调和音量。
  4. 点击 播放 开始朗读，点击任意句子可从该句开始播放。

浏览器兼容性

本工具依赖 Web Speech API 与 localStorage，建议使用 Safari、Chrome、Edge 等现代浏览器。部分浏览器的语音列表需要异步加载，若为空可稍等片刻再试。

技术栈

  • HTML + CSS + JavaScript
  • Web Speech API（SpeechSynthesisUtterance）
  • localStorage（文本与进度持久化）
  • 无后端、无依赖、纯静态页面

相关文章