使用JavaScript将您的浏览器转变为类似Siri的语音助手

最新推荐文章于 2024-09-06 09:41:38 发布

创梦引领

最新推荐文章于 2024-09-06 09:41:38 发布

阅读量318

点赞数

本文链接：https://blog.csdn.net/python_bug262/article/details/133451151

版权

JavaScript 专栏收录该内容

313 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍如何利用Web Speech API，用JavaScript创建一个简单的语音助手，让浏览器能响应语音指令，实现类似Siri的功能。文章包括HTML结构设置、JavaScript代码实现及运行注意事项，适合在支持Web Speech API的浏览器中体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在本文中，我将向您展示如何使用JavaScript创建一个简单的语音助手，使您的浏览器能够像Siri一样响应您的语音指令。我们将使用Web Speech API来实现语音识别和语音合成功能。

首先，让我们来设置HTML结构。创建一个包含一个文本输入框和一个按钮的HTML表单，用于接收用户的语音指令。此外，我们还需要一个用于显示语音助手回应的文本区域。

<!DOCTYPE html>
<html>
<head>

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

创梦引领

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

用 80 行 Javascript 代码构建自己的语音助手

qq_48793913的博客

07-18

591

在本教程中，我们将使用 80 行 JavaScript 代码在浏览器中构建一个虚拟助理（如 Siri 或 Google 助理）。你可以在这里测试这款应用程序，它将会听取用户的语音命令，然后用合成语音进行回复。你所需要的是： Google Chrome（版本 25 以上）一款文本编辑器由于 Web Speech API 仍处于试验阶段，该应用程序只能在受支持的浏览器上运行：Chrome（版本 25 以上）和 Edge（版本 79 以上）。我们需要构建哪些组件？要构建这个 Web ...

用 JavaScript 五分钟将 Siri 接入 ChatGPT（含全部源码）

03-22

6902

3. 进入刚才创建好的 AirCode 应用中，在「Environments」标签页，将复制的 API Key 的值填入「OPENAI_KEY」这一项的 value 中。另外，你也可以在快捷指令的编辑页面中，点击下方的「分享」按钮，在弹出的菜单中选择「添加到主屏幕」，这样就可以在桌面通过点击打开对话框。1. 填完环境变量后，点击页面最上方的「Deploy」按钮，在弹出对话框中点击「Deploy」，开始部署。2. 在打开的页面中点击「获取捷径」按钮，然后在弹出的窗口中点击「添加快捷指令」。

参与评论您还未登录，请先登录后发表或查看评论

artyom.js:语音控制-语音命令-语音识别和语音合成JavaScript库。在您的网站内使用Google Chrome创建您自己的siri，google now或cortana

03-31

Chrome 71更新由于用户滥用了语音合成API（ADS，虚假系统警告），因此Google决定在未由用户手势（点击，触摸等）触发的情况下删除该API在浏览器中的使用。这意味着，例如，如果artyom.say("Hello")未包装在用户事件中，则无法调用它。因此，在每次加载页面时，用户将需要在每个页面上至少单击一次以允许在网站中使用该API，否则将引发以下异常：“ [Deprecation] speechSynthesis.speak（）是未经用户激活的自M71以来，自2018年12月左右起不再允许使用。有关更多详细信息，请参见 ” 有关更多信息，请访问Bug或。要绕过此错误，用户将需要与网站进行至少一次手动交互，例如单击一次： < button id =" btn " > Allow Voice Synthesis </ button > < script src ="

如何让你的网页生成一个像siri一样的语音助手

suedar的小屋子

06-11

1495

首先你要知道两个概念语音识别 ???? 与语音合成 ????。语音识别: 语音识别（speech recognition）技术，也被称为自动语音识别（英语：Automatic Speech Recognition, ASR）、电脑语音识别（英语：Computer Speech Recognition）或是语音转文本识别（英语：Speech To Text, STT），其目标是以电脑自动将人类的语音内容转换为相应的文字。与说话人识别及说话人确认不同，后者尝试识别或确认发出语音的说话人而非其中所包含的词汇内

JavaScript实现语音助手核心代码

前端小记

08-30

4710

前言现在语音识别技术得到了越来越广泛的应用 https://www.xfyun.cn/doc/asr/rtasr/API.html#%E6%8E%A5%E5%8F%A3%E8%AF%B4%E6%98%8E ## 引入 1.可以通过import方式进行引入： import {voiceCore} from 'voice-core'; 2.可以通过require方式进行引入： const voiceCore = require('voice-core').voiceCore;...

【转】仿Siri的中文语音助理源码

圆代码

12-14

1140

之前闲暇之余借鉴Iris的框架，仿写了一个中文语音助理，效果如下： [img]http://hi.csdn.net/attachment/201112/13/796974_1323747223zZ2O.png[/img] [img]http://hi.csdn.net/attachment/201112/13/796974_1323747244GgMm.png[/img] 语音接...

30行JS代码带你手写自动回复语音聊天机器人

qq_44588612的博客

05-10

4846

本文章，只用了33行JS代码就写出了一个，自动回复的语音聊天机器人案例，大家快来看看吧！

仿Siri的中文语音助理源码

begin23的专栏

12-14

939

之前闲暇之余借鉴Iris的框架，仿写了一个中文语音助理，效果如下：语音接口使用的是科大讯飞的云语音接口，具体使用可以到科大讯飞的网站了解，智能语音处理部分使用的是小I聊天机器人的网络接口(http://www.xiaoi.com/widget/1007/index.html)——用于聊天模式下使用（最近好像这个接口出问题了，无论问他什么，他都不知道，这个是网站

基于Android仿Siri中文语音助理的完整源码解析

最新发布

weixin_32747681的博客

09-06

1471

本文还有配套的精品资源，点击获取简介：该资源为安卓平台开发的类似Siri的中文语音助理，支持多种任务如发送短信、查询天气和设定提醒等，通过语音交互提升用户体验。项目涉及Android语音识别框架、第三方中文语音API集成、语音识别关键组件实现，以及自然语言处理模块的应用。源码展示了构建智能语音助理所需的多项技术和方法，是安卓语音应用开发的学习材料。 1. And...

siriwave：在JS库中复制的Apple:registered:Siri波形

02-03

使用Canvas API在纯Javascript中复制了“ Apple Siri”波形。经典风格 iOS 9+风格用法 浏览器（通过CDN）的使用 < script src =" https://unpkg.com/siriwave/dist/siriwave.umd.min.js " > </ script &...

H5讯飞语音听写js

07-18

H5请求webapi,实现讯飞语音听写、语音合成、语义理解功能

HTML5仿苹果Siri动画特效.zip

10-09

非常实用的特效代码，可以完美运行，可以二次修改！

siriwavejs, 在JS库中，Siri波被复制.zip

09-18

siriwavejs, 在JS库中，Siri波被复制你有没有想过如何在你的网站或者移动应用上获得Siri的wave效果？SiriWaveJS是一个易于使用的库，可以让你获得这个效果。把剧本。Surf ！实时示例！用法<div id="siri-co

AI语音科大讯飞智能api【web端接口调用实现语音识别】webscoket调试试用

11-07

使用web形式实现语音识别

jQuery+CSS3仿iPhone4S Siri UI特效代码

03-20

为了实现Siri的语音识别功能，可能还需要结合使用Web Speech API，这是一个浏览器内置的API，允许网页应用进行语音输入和语音合成。`SpeechRecognition`对象可以监听用户的语音输入，并将其转换为文本，然后应用可以...

siriWave.js的demo

weixin_30709635的博客

09-12

366

demo.html <style>body { background: #000; }</style> <script src="../siriwave.js"></script> <div id="container" style="width: 900px; height: 300px; background: #000"&...

实现浏览器语音呼起及语音录入及下载

HGX-DJK

07-06

869

定义一个函数checkSilence，获取频率数据并计算平均值。第二部分：停止录音；第三部分：静默监听。检查浏览器是否支持getUserMedia，用于获取音频流。如果低于阈值，启动静音定时器，超过延迟时间则停止录音。如果支持，获取音频流并创建音频上下文和输入源。导出录制的音频为WAV格式，并创建下载链接。将平均值转换为分贝值，并与静音阈值进行比较。禁用开始录音按钮，启用停止录音按钮。启用开始录音按钮，禁用停止录音按钮。如果高于阈值，清除静音定时器。创建分析节点并连接到输入源。创建录音实例并开始录音。

WebServer应用示例：不到100行代码玩转Siri语音控制 | ESP32轻松学（Arduino版）

铁熊玩创客

05-17

2125

众所周知，掌控板在创客教育中用的非常广泛，它是一块基于 ESP32 的学习开发板。大家对掌控板编程，用的比较多的都是图形化编程的方式，比如 mPython、Mind+ 等。但是，既然掌控板是基于 ESP32 芯片的，所以我们也可以用 Arduino 软件对其编程。所以，有时间的话，我准备给大家分享一系列用 Arduino 代码对掌控板（ESP32）编程的教程：用 Arduino 玩转掌控板(ES...

python实现类似Siri的AI语音聊天机器人（需要图灵机器人和百度语音合成的API）

LiePy的博客

03-24

3951

就是模仿Siri的一个东西，但是语音输入功能还没实现，所以只能做一个打字输入，语音输出的机器人，我不是原创，参考微信公众号：学习python的正确姿势一、配置 Windows10系统 python3.7 pycharm （其实这些都不重要）二、准备工作（1）图灵机器人API 自己做一个生动的能聊天的机器人太难了，不过图灵机器人已经帮我们做好了，而且提供了开放的接口，我们注册一个，使用它的...