示例工程【免费下载链接】supertonicLightning-Fast, On-Device, Multilingual TTS — running natively via ONNX.项目地址https://gitcode.com/GitHub_Trending/sup/supertonic点击查看免费下载Supertonic 3 是一款主打轻量、端侧、多语言的开源 TTS 系统而本仓库的 web/ 示例则展示了如何借助 ONNX Runtime Web把完整的语音合成管线搬到浏览器里——不需要任何服务器参与推理。本文以 web/README.md 为骨架结合 web/main.js、web/helper.js、web/index.html 等源码完整讲解它的环境要求、安装启动、操作流程、多语言支持、底层技术细节与故障排查让读者既能直接跑起 Demo也能理解 WebGPU/WebAssembly 双后端切换、文本分块、去噪步数与音色预设等核心机制。一、项目定位纯浏览器端的多语言 TTSSupertonic 3 是 Supertonic 系列的最新版本支持 31 种语言的文本转语音模型以开放权重发布并通过 ONNX Runtime 在本地推理。仓库主 README.md 将其定位为lightning-fast, on-device的 TTS不依赖云端 API、不产生隐私外泄在桌面、浏览器、移动端乃至树莓派等边缘设备上均可运行。web/目录则把这条端侧路线走到了极致——连推理都在浏览器内完成 完全在浏览器内运行推理阶段无需服务器 WebGPU 加速并自动回退到 WebAssembly 31 种语言支持⚡ 预提取音色风格voice style无需参考音频即可即时生成 现代、响应式 UI 10 个音色预设5 男声 5 女声 生成结果可直接下载为 WAV 文件 展示音频时长、生成耗时等详细统计⏱️ 实时进度跟踪。二、环境要求与前置条件根据 web/README.md 的 Requirements 一节运行该 Demo 只需两类依赖Node.js用于启动 Vite 开发服务器现代浏览器Chrome、Edge、Firefox、Safari 均可若想使用 WebGPU 加速则推荐 Chrome/Edge 113详见下文WebGPU 与 WebAssembly 回退。前端推理依赖的运行时库由 web/package.json 声明{ dependencies: { fft.js: ^4.0.3, onnxruntime-web: ^1.17.0 }, devDependencies: { vite: ^5.0.0 } }其中onnxruntime-web是浏览器端执行 ONNX 模型的核心fft.js供相关信号处理使用Vite 负责开发与打包。注意 web/vite.config.js 中通过optimizeDeps.exclude: [onnxruntime-web]将 ONNX Runtime 排除出预构建避免其 WASM 资源被误处理。三、安装与启动开发服务器按 web/README.md 的 Installation 与 Running the Demo 部分两个命令即可启动npm install npm run devnpm run dev实际执行的是 web/package.json 中的vite脚本。根据 web/vite.config.js 的配置Vite 开发服务器默认监听3000 端口server.port 3000并会在启动时自动打开浏览器server.open true。因此启动后通常访问http://localhost:3000即可看到界面。提示根目录 README.md 的 Browser Example 一节也给出了同样的命令cd web npm install npm run dev表明该示例可直接在web/目录内运行。四、使用指南从模型加载到音频下载web/README.md 的 Usage 一节给出了 7 步完整操作流程下面结合 web/main.js 的实际实现逐条展开。1. 等待模型加载完成页面加载时web/main.js 会触发initializeModels()应用自动加载 ONNX 模型与默认音色风格M1。加载过程会在界面顶部的状态栏实时显示进度如 Loading ONNX models (2/4): Text Encoder...这是因为加载了 4 个 ONNX 子模型模型文件路径相对 web 根目录职责Duration Predictorassets/onnx/duration_predictor.onnx预测每个文本 token 的时长Text Encoderassets/onnx/text_encoder.onnx将文本编码为语义向量Vector Estimatorassets/onnx/vector_estimator.onnx迭代去噪、估计潜变量Vocoderassets/onnx/vocoder.onnx把潜变量还原为 44.1kHz 波形这四个路径硬编码在 web/helper.js 的loadTextToSpeech()中模型加载顺序、进度回调modelName, current, total也在该函数中实现。2. 选择音色风格在 Voice Style 下拉框中选择预设音色共10 个预设全部为预提取的 JSON 风格文件web/index.html 中的下拉选项即为完整列表Male 1-5M1–M5男声风格Female 1-5F1–F5女声风格。下拉框选项的值对应assets/voice_styles/下的 JSON 文件如M1.json切换时会动态加载对应的风格张量。根据 web/helper.js 的loadVoiceStyle()每个 JSON 内含style_ttl文本到潜变量模块的风格张量与style_dp时长预测模块的风格张量两组数据加载后封装为Style对象供推理使用。正因风格被预先提取成张量生成时无需任何参考音频处理可即时生成。3. 选择语言根据输入文本的实际语言从语言下拉框中选择对应项。Supertonic 3 支持31 种语言完整列表参见仓库主 README.md。web/helper.js 中的AVAILABLE_LANGS常量即演示了实际支持的语言代码集合web/index.html 的语言下拉框则给出了完整对照。小技巧若不确定输入文本属于哪种语言仓库主 README 提到可以传langna让模型以语言无关方式处理。Web 示例通过isValidLang()校验语言代码非法语言会抛出异常并提示可用列表。4. 输入文本在文本框中输入或粘贴想要转为语音的文字。页面默认提供了一段英文示例文本可直接点击生成体验。5. 调整合成参数可选界面上有两个可调参数web/index.html 的params-grid区域Total Steps总去噪步数步数越多质量越好但越慢默认8UI 允许范围 1–50。在 web/main.js 中该值通过totalStepInput.value读取并传给textToSpeech.call()在推理内部它驱动 web/helper.js 中的迭代去噪循环for (let step 0; step totalStep; step)每次迭代调用 Vector Estimator 模型并从噪声潜变量中逐步去噪。Speed语速默认1.05推荐范围0.9–1.5UI 允许 0.5–2.0。该值在 web/helper.js 的_infer()中用于缩放 Duration Predictor 输出的每个 token 时长duration[i] / speed步长越大、语速越快。6. 点击 Generate Speech 生成语音点击后web/main.js 的generateSpeech()会依次执行读取文本、语言、步数与语速参数调用textToSpeech.call(text, lang, style, totalStep, speed, 0.3, progressCallback)合成音频合成期间实时展示去噪进度Denoising (3/8)...生成完成后把浮点波形写入 WAV。其中textToSpeech.call()还承担了长文本自动分块根据 web/helper.js 的chunkText()文本先按段落、再按句子边界切分韩语/日语每块最长 120 字符、其他语言最长 300 字符每块单独推理块与块之间插入默认0.3 秒静音silenceDuration参数后拼接从而让长文本也能自然、稳定地合成为一整段语音。7. 查看结果生成完成后右侧结果区会展示完整输入文本便于对照音频时长与生成耗时统计秒级内嵌audio播放器直接在浏览器中试听Download WAV按钮一键下载synthesized_speech.wav文件。下载功能由 web/main.js 的window.downloadAudio()实现把生成的 Float32 波形经 web/helper.js 的writeWavFile()打包为标准16-bit 单声道 WAV采样率取textToSpeech.sampleRate即模型配置cfgs.ae.sample_rate主 README 指明为 44.1kHz再通过 Blob a download触发浏览器下载。五、多语言支持31 种语言与文本预处理web/README.md 的 Multilingual Support 一节指出Supertonic 3 支持 31 种语言选择与输入文本匹配的语言可获得最佳效果模型会自动完成文本预处理与对应语言的发音。在源码层面这一能力由 web/helper.js 的UnicodeProcessor承担其preprocessText()在送入模型前对文本做了一系列规范化Unicode 归一化text.normalize(NFKD)去除 emoji覆盖 1F600–1F9FF 等多个 Unicode 区段的正则清除符号替换将各种破折号–、‑、—、弯引号、方括号、竖线、箭头等统一替换为规范字符或空格去除特殊符号如 ♥、☆、© 等表达式改写→ at 、e.g.,→ for example, 、i.e.,→ that is, 标点空格修正与去重引号、压缩多余空格补齐句尾标点若文本不以句号、问号、感叹号等结尾自动补一个.语言标签包裹最终以lang文本/lang形式包裹文本让模型按指定语言发音。这些逻辑与 web/README.md 更新日志中增强文本预处理包含全面归一化、emoji 移除、符号替换与标点处理的描述完全对应。六、技术细节WebGPU、WebAssembly 与后端自动回退浏览器兼容性web/README.md 的 Technical Details 一节明确列出的三大技术栈ONNX Runtime Web在浏览器中执行 ONNX 模型推理Web Audio API播放生成的音频Vite开发与打包。WebGPU 优先、WASM 兜底的执行提供者策略从 web/main.js 的initializeModels()可以看到明确的回退逻辑优先尝试用executionProviders: [webgpu]加载 4 个模型并设置graphOptimizationLevel: all若 WebGPU 初始化失败浏览器不支持等捕获异常后改用[wasm]重新加载加载成功后界面右上角的backend badge会显示当前实际使用的执行后端WebGPU或WebAssembly。这解释了 web/README.md 故障排查中WebGPU not available的处理方式WebGPU 仅在较新的 Chrome/Edge113中可用应用会自动回退到 WebAssembly可通过后端徽章确认当前使用的执行提供者。推理管线概览供进阶理解结合 web/helper.js 的TextToSpeech._infer()一次推理大致分为五步文本编码把分块后的文本映射为text_idsint64 张量与text_maskfloat32 掩码时长预测Duration Predictor根据text_ids、style_dp、text_mask输出每个 token 的时长随后除以语速文本编码Text Encoder输出文本语义向量text_emb迭代去噪sampleNoisyLatent()用 Box-Muller 变换采样高斯噪声潜变量然后循环totalStep次调用Vector Estimator逐步从噪声中还原干净潜变量声码器Vocoder把最终潜变量转为 44.1kHz 波形。这与仓库主 README 中speech autoencoder flow-matching based text-to-latent的架构描述一致。七、资源路径约定Notesweb/README.md 的 Notes 一节给出了两条重要的目录约定ONNX 模型必须位于 web 根目录下的assets/onnx/音色风格 JSON必须位于 web 根目录下的assets/voice_styles/。开发服务器对此有专门支持由于仓库顶层 assets/ 目录统一存放模型资产主 README 要求把 Hugging Face 的supertonic-3仓库 clone 到assetsweb/vite.config.js 内置了一个serve-root-assets插件把/assets/*请求代理到仓库根目录的assets/下从而让浏览器在开发期也能按assets/onnx/...的路径直接取到模型文件。其他要点预提取的音色风格文件使生成无需音频处理可即时出音仓库共提供 10 个音色预设M1–M5、F1–F5其中 M3/M4/M5 与 F3/F4/F5 是更新日志中提到的后增 6 个风格。八、故障排查Troubleshootingweb/README.md 最后给出了 5 类常见问题及处理建议整理如下模型无法加载Models not loading打开浏览器控制台查看报错信息确认assets/onnx/路径正确且模型文件可访问若从不同域名托管检查 CORS 设置。WebGPU 不可用WebGPU not availableWebGPU 仅在较新的 Chrome/Edge版本 113中可用应用会自动回退到 WebAssembly通过后端徽章backend badge确认当前使用的执行提供者。内存不足Out of memory errors尝试更短的文本输入降低去噪步数换用内存更大的浏览器关闭其他标签页释放内存。音频质量问题Audio quality issues尝试不同的音色预设增大去噪步数以提升质量。生成缓慢Slow generation若当前使用 WebAssembly换用支持 WebGPU 的浏览器确保没有其他重型进程占用资源适当减少去噪步数以换取更快的生成速度代价是质量略降。九、延伸与总结作为仓库多运行时 SDK 生态的一环web/与 py/、nodejs/、java/、cpp/、rust/ 等目录并列主 README.md 的 Programming Language Support 表格但它是最特殊的一个——无需安装任何本地推理依赖打开浏览器即可完整体验 31 语言、10 音色、44.1kHz 输出的端侧 TTS。对于开发者而言本示例的参考价值体现在三处一是 web/helper.js 完整展示了 ONNX Runtime Web 的会话创建、张量构造与多模型串联写法可直接移植到自己的 Web 应用中二是 web/main.js 演示了 WebGPU → WASM 的优雅降级模式与后端状态可视化三是文本分块、自动补齐标点、WAV 编码等工程细节均为生产可用级别。按 web/README.md 的指引安装依赖并运行npm run dev即可在本地浏览器中亲手验证这条完全端侧的语音合成链路。赞分享示例工程【免费下载链接】supertonicLightning-Fast, On-Device, Multilingual TTS — running natively via ONNX.项目地址https://gitcode.com/GitHub_Trending/sup/supertonic点击查看免费下载相关推荐RunAnywhere Web SDK 的 ONNX/Sherpa 语音后端在浏览器中运行 STT、TTS 与 VADRunAnywhere Web SDK 的 ONNX/Sherpa 语音后端在浏览器中运行 STT、TTS 与 VAD runanywhere/web onAI模型推理服务推理引擎本地部署多模态Segment Anything Web Demo 实战指南用 ONNX Runtime Web 与 SharedArrayBuffer 在浏览器中实时运行 SAMSegment Anything Web Demo 实战指南用 ONNX Runtime Web 与 SharedArrayBuffer 在浏览器中实时运行人工智能计算机视觉基础模型Tesseract.js v7 实战指南在浏览器与 Node.js 中运行多语言 OCRTesseract.js v7 实战指南在浏览器与 Node.js 中运行多语言 OCR Tesseract.js 是一个纯 JavaScript 的 OCROCR计算机视觉上一篇终极Vue3管理系统开发实战Element Plus模板完全指南下一篇WeMod Pro免费解锁终极指南一键获取完整教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考