如何用JavaScript构建一个语音识别或合成应用?

答案:JavaScript通过Web Speech API实现语音识别与合成。使用SpeechRecognition将语音转文本,需HTTPS及浏览器支持,推荐Chrome;通过SpeechSynthesis将文本转语音,可调节语速、音调、音量,适用于朗读与辅助功能。二者结合可用于语音记事本、无障碍工具等场景,注意权限、兼容性与用户体验。

如何用javascript构建一个语音识别或合成应用?

要构建一个语音识别或语音合成应用,JavaScript 提供了浏览器原生支持的 API,分别是 Web Speech API 中的 SpeechRecognition(语音识别)和 SpeechSynthesis(语音合成)。这两个接口让开发者可以轻松实现听写、语音控制、朗读文本等功能。

语音识别:使用 SpeechRecognition

SpeechRecognition 接口允许你将用户的语音转换为文本。虽然目前在部分浏览器中仍需加前缀,但 Chrome 支持较好。

示例代码:

开启语音识别并获取结果:

// 检查浏览器是否支持const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;if (!SpeechRecognition) {  console.log("当前浏览器不支持语音识别");}const recognition = new SpeechRecognition();recognition.lang = 'zh-CN'; // 设置语言recognition.interimResults = false; // 是否返回中间结果recognition.maxAlternatives = 1;// 开始识别document.getElementById('start-btn').onclick = () => {  recognition.start();};// 获取结果recognition.onresult = (event) => {  const transcript = event.results[0][0].transcript;  document.getElementById('output').textContent = transcript;  console.log('识别结果:', transcript);};// 错误处理recognition.onerror = (event) => {  console.error('识别出错:', event.error);};

说明与建议:

立即学习“Java免费学习笔记(深入)”;

用户首次使用时会弹出麦克风权限请求,需确保页面在 HTTPS 环境下运行。 interimResults 设为 true 可实时显示未完成的识别内容。 注意兼容性:Safari 和 Firefox 基本不支持,推荐用于 Chrome 或基于 Chromium 的浏览器。

语音合成:使用 SpeechSynthesis

SpeechSynthesis 接口可以将文本“朗读”出来,适合做语音提示、辅助阅读等场景。

示例代码:

让浏览器朗读输入框中的文字:

const synth = window.speechSynthesis;document.getElementById('speak-btn').onclick = () => {  const text = document.getElementById('text-input').value;  if (!text || synth.speaking) return; // 避免重复播放  const utterance = new SpeechSynthesisUtterance(text);  utterance.lang = 'zh-CN';  utterance.rate = 1;   // 语速,0.1 到 10  utterance.pitch = 1;  // 音调,0 到 2  utterance.volume = 1; // 音量,0 到 1  synth.speak(utterance);};// 停止朗读document.getElementById('stop-btn').onclick = () => {  synth.cancel();};

进阶技巧:

可通过 speechSynthesis.getVoices() 获取可用语音列表,支持不同性别或语言的发音人。 绑定 utterance.onend 事件可在朗读后执行回调。 部分系统/浏览器对中文语音支持有限,可测试不同设备效果。

实际应用场景建议

结合两个功能,你可以构建如下应用:

语音记事本:用户说话 → 转文字保存;点击按钮 → 文字朗读出来。 无障碍工具:自动朗读网页内容,或通过语音命令导航。 语言学习助手:用户朗读句子 → 识别后比对正确文本;错误时用语音反馈。

开发时注意用户体验:

添加状态提示(如“正在聆听…”、“朗读中”)。 提供手动输入备用方案,避免语音失败导致功能不可用。 控制连续识别频率,防止触发过多请求。基本上就这些。利用 Web Speech API,无需引入大型框架或服务,就能快速做出实用的语音交互功能。虽然功能受限于浏览器支持,但在合适场景下非常高效。

以上就是如何用JavaScript构建一个语音识别或合成应用?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1523145.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
JavaScript引擎中的隐藏类和内联缓存是如何工作的?
上一篇 2025年12月20日 15:39:59
在 Deno 中,如何安全地管理第三方模块的权限与依赖?
下一篇 2025年12月20日 15:40:07

相关推荐

  • qq浏览器怎么批量删除重复的收藏夹_QQ浏览器重复收藏夹批量清理技巧

    首先使用QQ浏览器内置整理功能可快速批量删除重复书签,进入收藏夹后点击整理选项,系统自动扫描并允许勾选删除重复项;若重复较多,建议导出收藏夹为HTML文件,通过电脑端Excel或文本工具提取网址并删除重复内容,再重新导入;还可借助第三方书签管理工具如Raindrop.io导入数据,利用其智能识别功能…

    2026年8月27日
    100
  • 怎样开快手小店卖货?怎样开快手小店卖货赚钱

    随着移动互联网的快速演进,短视频已深度融入大众日常生活。作为国内领先的短视频社交平台,快手汇聚了庞大的用户群体。近年来,越来越多的创业者和内容创作者选择在快手上开设线上店铺,借助短视频与直播实现商品销售和收入增长。那么,怎样在快手开小店卖货并实现盈利?本文将为你全面解析操作流程与运营策略。 一、精准…

    2026年8月27日
    000
  • Win10图标小盾牌如何去掉?Win10图标小盾牌去掉方法教程分享

    win10图标小盾牌如何移除?不少用户在操作windows系统时会发现某些程序图标上会出现小盾牌标志,对此感到疑惑,想知道如何将其清除。那么win10图标小盾牌怎么移除呢?以下是移除win10图标小盾牌的具体步骤,希望能为大家提供帮助。 移除Win10图标小盾牌的操作指南 1、按下键盘上的“Win键…

    2026年8月27日
    000
  • 如何在PHP项目中轻松生成各种随机值?eonx-com/easy-random助你高效搞定!

    可以通过一下地址学习composer:学习地址 在软件开发的世界里,随机性无处不在。从生成用户注册时的默认密码,到为订单生成唯一的引用编号,再到创建测试环境所需的模拟数据,我们对“随机”的需求从未停止。然而,手动实现一个既安全又符合业务逻辑的随机值生成器,往往比想象中要复杂得多。我曾经就遇到过这样的…

    用户投稿 2026年8月27日
    000
  • 碰一碰秒传视频,还能语音三连!鸿蒙版哔哩哔哩太秀了!

    升级鸿蒙5后,我才发现鸿蒙版哔哩哔哩早已焕然一新!它早已不只是一个追番看视频的工具,更像是打通了手机“任督二脉”的全能型b站,那些藏在系统深处的黑科技,用一次就让人忍不住感叹:“这也太香了!” 动动嘴,三连轻松完成!彻底解放双手 想刷点有趣的视频放松一下?再也不用打开App、手动打字搜索了。只需唤醒…

    2026年8月27日
    100
  • Win7回收站删除的文件可以找回吗?Win7恢复删除文件方法教学

    一、准备工具: 若想找回Win7系统中回收站删除的文件,需准备好一台电脑、一个可用的U盘以及足够的耐心。这些设备将为我们的文件恢复提供支持。 二、操作步骤: 首先,把U盘连接到电脑上,然后下载一款专业的数据恢复软件,例如Recuva。安装完成后打开该软件,并依照指引进行设置,挑选想要恢复的文件格式及…

    2026年8月27日
    000
  • 如何避免项目依赖技术债?ecoapm/libyear帮你量化依赖新鲜度

    可以通过一下地址学习composer:学习地址 作为一名php开发者,我们都深知依赖管理的重要性。一个现代的php项目几乎离不开composer,它帮我们轻松地引入和管理各种第三方库。然而,随着项目持续迭代,一个隐形的“炸弹”也悄然埋下——过时的composer依赖。 我曾在一个长期维护的项目中,面…

    用户投稿 2026年8月27日
    000
  • 抖店尺码怎么设置?抖店怎么设置商品规格

    随着抖音电商平台的持续壮大,越来越多商家选择入驻抖店,借助这一流量高地实现销量突破。而在日常运营中,商品尺码的设置显得尤为关键。科学合理的尺码配置不仅能有效提升下单转化率,还能大幅降低因尺码不符引发的退货率,增强用户购物体验。那么,抖店究竟该如何设置尺码?本文将系统介绍抖店尺码设置的具体步骤与实用技…

    2026年8月27日
    500
  • 如何解决在Pantheon上修改代码后无法同步到GitHub的问题:QuicksilverPushback助你轻松同步

    在使用 Pantheon 进行网站开发时,经常会遇到需要在 Dashboard 上直接修改代码的情况,例如修复一些小问题或者进行一些快速的配置更改。然而,这些修改并不会自动同步回你的 GitHub 或 GitLab 仓库,这可能会导致代码库不同步,给后续的开发和维护带来麻烦。Quicksilver …

    用户投稿 2026年8月27日
    000
  • 登录、注销与记住我功能的实现

    登录、注销与记住我功能在web应用中的实现主要通过会话管理和持久化存储。1. 登录功能通过用户认证并存储用户名在会话中实现。2. 记住我功能通过设置会话为持久化并使用安全的cookie实现。3. 注销功能通过移除会话中的用户名并重定向到登录页面实现。安全性和性能优化是实现这些功能时的关键考虑因素。 …

    2026年8月27日
    000
  • 如何打开ceb文件?

    ceb是一种版式文件格式,广泛应用于政府部门的公文处理中。不少新入职的员工可能会遇到不知道如何打开ceb文件的问题,实际上,这个操作非常简单。下面,小编将为您详细介绍如何打开ceb文件。 小编的一位朋友最近刚刚加入一家政府机构,领导交给他的任务中有一个文件是ceb格式的,他完全不知道该如何打开这种文…

    2026年8月27日
    100
  • HBase配置文件加载是否正确如何测试以解决Kerberos认证连接问题?

    HBase Kerberos认证连接问题及配置文件加载测试方法 在使用HBase时,通过Kerberos认证进行连接时,可能会遇到各种错误。这些错误通常与配置文件的加载和环境变量的设置有关。本文将详细介绍如何测试HBase配置文件是否被正确加载,以解决Kerberos认证连接的报错问题。 问题背景 …

    2026年8月27日
    000
  • 普罗宇宙机器人全球首发:重塑工业场景,定义工业级具身智能新标杆

    普罗宇宙机器人全球首发:重塑工业场景,定义工业级具身智能新标杆普罗宇宙机器人全球首发:重塑工业场景,定义工业级具身智能新标杆普罗宇宙机器人全球首发:重塑工业场景,定义工业级具身智能新标杆普罗宇宙机器人全球首发:重塑工业场景,定义工业级具身智能新标杆

    8月8日,普罗宇宙正式向全球发布面向工业场景的工业轮式人形机器人——普罗宇宙大白机器人。作为兼具柔性与精度的工业级具身智能机器人,大白的诞生不仅是普罗宇宙在机器人领域的突破性成果,更标志着工业自动化向“人机协同、柔性高效”迈进了关键一步,为全球智能制造产业注入全新活力。。 以“高精度、强适应性、工序…

    2026年8月27日 用户投稿
    100
  • 如何解决PHP异步操作中的效率瓶颈?GuzzlePromises与Composer助你构建高性能应用

    可以通过一下地址学习composer:学习地址 面对的困境:PHP异步操作的“痛点” 想象一下,你正在开发一个电商网站的商品详情页。为了展示完整的商品信息,你可能需要: 从商品服务获取基本信息。从库存服务获取实时库存量。从评论服务获取用户评价。从推荐服务获取相关商品列表。 如果这些请求都是顺序执行的…

    用户投稿 2026年8月27日
    000
  • 2024全新Win7极限精简版32位下载(低配专用)

    一、准备工作: 一台配置较低的电脑:该版本Win7专为老旧设备打造,让旧电脑也能流畅运行! 稳定的网络环境:下载系统镜像需要联网,请确保网络连接正常。 U盘或光盘介质:用于写入安装文件,便于安装操作。 二、操作步骤: 获取安装包:前往官网或可信平台下载2024最新Win7极致简化版32位系统文件。 …

    2026年8月27日
    200
  • 如何设置抖音推送人群年龄?抖音怎么设置推送人群

    在抖音这个庞大的流量生态中,如何让内容精准抵达目标用户,是每位创作者和广告投放者关注的核心问题。本文将详细解析如何设置抖音推送人群的年龄范围,帮助你提升内容的曝光效率与吸引力。 一、掌握抖音用户年龄结构 首先,了解平台整体的年龄分布至关重要。根据抖音官方发布的数据,其核心用户群体集中在18至35岁之…

    2026年8月27日
    100
  • ps如何挽救曝光不足的灰暗图片

    ps如何挽救曝光不足的灰暗图片ps如何挽救曝光不足的灰暗图片ps如何挽救曝光不足的灰暗图片ps如何挽救曝光不足的灰暗图片

    曝光不足的灰暗照片常常令人感到惋惜,但有了 photoshop(简称 ps),我们完全可以让这些影像重获新生。 首先,将需要处理的图片导入 Photoshop。进入操作界面后,点击顶部菜单栏中的“图像”,选择“调整”子菜单下的“曲线”功能。这一步是改善欠曝图像的核心操作之一。在弹出的曲线调节面板中,…

    2026年8月27日 用户投稿
    200
  • Swoole的协程(Coroutine)是什么?如何工作?

    swoole的协程是一种高效的并发编程模型,允许在单个线程内并行执行多个任务。1)协程通过协作式调度工作,主动让出执行权,提高资源利用率和性能。2)协程适合处理io密集型任务,需注意长耗时任务和共享资源管理。 Swoole的协程(Coroutine)是什么?如何工作? Swoole的协程是一种高效的…

    2026年8月27日
    000
  • Win7电脑底下一排图标没了怎么办?Win7电脑底下一排图标没了解决

    Win7电脑底下一排图标没了怎么办?Win7电脑底下一排图标没了解决Win7电脑底下一排图标没了怎么办?Win7电脑底下一排图标没了解决Win7电脑底下一排图标没了怎么办?Win7电脑底下一排图标没了解决Win7电脑底下一排图标没了怎么办?Win7电脑底下一排图标没了解决

    win7电脑任务栏图标消失怎么办?在日常使用电脑时,任务栏是我们进行多种操作的重要工具,比如启动程序、调整音量或网络设置等。但有时会遇到win7电脑底部的任务栏图标突然不见了的情况,这该怎么办呢?别担心,下面将为大家介绍几种解决方法。 Win7电脑任务栏图标消失的解决方法 方法一:任务栏被误设为隐藏…

    2026年8月27日 用户投稿
    000
  • 智能写作检测怎么规避_GPTZero检测原理与应对策略

    要规避AI检测,需让文本呈现人类写作的多样性与不确定性。GPTZero等工具依赖分析文本的“困惑度”和“突发性”,AI因用词规整、句式单一、缺乏情感易被识别。人类写作则具备高低起伏的节奏、个性化表达和真实情感体验。为降低检测风险,应主动打破模式化表达:灵活变换句式长短,增加词汇丰富性,使用比喻、排比…

    2026年8月27日
    100

发表回复

登录后才能评论
关注微信