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

发布

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

朗读者是什么

朗读者（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

发布

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 在线工具

FunAudioLLM：用于人类与LLM自然交互的语音理解与生成基础模型

本文档介绍 FunAudioLLM，这是一个旨在增强人类与大型语言模型（LLM）之间自然语音交互的框架。其核心是两个创新模型：用于高精度多语种语音识别、情感识别和音频事件检测的 SenseVoice；以及用于多语种、音色和情感控制的自然语音生成的 CosyVoice。SenseVoice 具有极低的延迟并支持超过 50 种语言，而 CosyVoice 在多语种语音生成、零样本语音生成、跨语言语音克隆以及指令遵循能力方面表现出色。与 SenseVoice 和 CosyVoice 相关的模型已在 Modelscope 和 Huggingface 上开源，同时相应的训练、推理和微调代码也已在 GitHub 上发布。通过将这些模型与 LLM 集成，FunAudioLLM 能够实现语音翻译、情感语音聊天、交互式播客和富有表现力的有声读物叙述等应用，从而推动语音交互技术的边界。

SenseVoice

CosyVoice 2

参考资料 FunAudioLLM: Voice Understanding and Generation Foundation Models for Nat

funaudiollmsensevoicecosyvoicefunasrspeech-recognitionspeech-synthesisvoice-cloningmultilingual语音识别语音合成

Qwen2.5-Omni：端到端多模态大模型

Qwen2.5-Omni是Qwen系列中全新的旗舰级端到端多模态大模型，专为全面的多模式感知设计，无缝处理包括文本、图像、音频和视频在内的各种输入，同时支持流式的文本生成和自然语音合成输出。

点击下方视频了解更多信息吧 😃

Open Video

概览

简介

Qwen 2.5-Omni是一个端到端的多模态大语言模型，旨在感知包括文本、图像、音频和视频在内的多种模态，同时以流式的方式生成文本和自然语音响应。

主要特点

  • 全能创新架构：我们提出了一种全新的Thinker-Talker架构，这是一种端到端的多模态模型，旨在支持文本/图像/音频/视频的跨模态理解，同时以流式方式生成文本和自然语音响应。我们提出了一种新的位置编码技术，称为TMRoPE（Time-aligned Multimodal RoPE），通过时间轴对齐实现视频与音频输入的精准同步。
  • 实时音视频交互：架构旨在支持完全实时交互，支持分块输入和即时输出。
  • 自然流畅的语音生成：在语音生成的自然性和稳定性方面超越了许多现有的流式和非流式替代方案。
  • 全模态性能优势：在同等规模的单模态模型进行基准测试时，表现出卓越的性能。Qwen2.5-Omni在音频能力上优于类似大小的Qwen2-Audio，并与Qwen2.5-VL-7B保持同等水平。
  • 卓越的端到端语音指令跟随能力：Qwen2.5-Omni在端到端语音指令跟随方面表现出与文本输入处理相媲美的效果，在MMLU通用知识理解和GSM8K数学推理等基准测试中表现优异。
qwen2.5-omniqwenmultimodalllmspeech-recognitionspeech-synthesistransformershugging-facethinker-talkertmrope