DEEPZONE

 ลืมรหัสผ่าน
 ลงทะเบียน
ค้นหา
ดู: 83|ตอบกลับ: 0

将语音搜索添加到 React 应用程序

[คัดลอกลิงก์]

1

กระทู้

1

โพสต์

5

เครดิต

Newbie

เครดิต
5
语音命令不仅适用于 Google 或 Alexa 等助手。它们还可以添加到您的移动和桌面应用程序中,为您的最终用户提供额外的功能甚至乐趣。在您的应用程序中添加语音命令或语音搜索非常容易。在本文中,我们将使用 Web Speech API 构建语音控制的图书搜索应用程序。 Backward Skip 10s Play Video Forward Skip 10s 我们将构建的完整代码可以在GitHub上找到。对于不耐烦的人,我们将在本文末尾构建一个工作演示。 Web 语音 API 简介 在我们开始之前,需要注意的是,Web Speech API 目前的浏览器支持有限。要阅读本文,您需要使用受支持的浏览器。 有关主要浏览器对 mdn-api__SpeechRecognition 功能的支持的数据 首先,让我们看看启动和运行Web Speech API是多么容易。


您可能还想阅读 SitePoint对 Web Speech API 的介绍,并查看有关 Web Speech API 的其他一些实验。)要开始使用 Speech API,我们只需要实例化一个新SpeechRecognition类,以允许我们收听用户的声音嗓音  阿联酋电报号码列表 我们首先创建一个SpeechRecognition常量,它等于全局浏览器供应商前缀webkitSpeechRecognition。之后,我们可以创建一个语音变量它将成为我们SpeechRecognition类的新实例。这将使我们能够开始聆听用户的讲话。为了能够处理用户语音的结果,我们需要创建一个事件侦听器,当用户停止说话时将触发该事件侦听器。最后,我们start在类实例上调用该函数。 第一次运行此代码时,系统将提示用户允许访问麦克风。这是浏览器为防止不必要的窥探而实施的安全检查。用户接受后,他们就可以开始发言,并且不会再次请求他们对该域的许可。




当用户停止说话后,onresult事件处理函数将被触发。 该onresult事件传递一个SpeechRecognitionEvent对SpeechRecognitionResultList。对象SpeechRecognitionResultList包含SpeechRecognitionResult对象。数组中的第一项返回一个SpeechRecognitionResult对象,其中包含另一个数组。该数组中的第一项包含用户所说内容的文字记录。 上面的代码可以从 Chrome DevTools 或普通的 JavaScript 文件运行。现在我们已经了解了基础知识,让我们看看将其构建到 React 应用程序中。通过 Chrome DevTools 控制台运行时我们可以看到下面的结果。 显示 SpeechRecognitionResultList 的浏览器开发工具 在 React 中使用网络语音 利用我们已经学到的知识,将 Web Speech API 添加到 React 应用程序是一个简单的过程。我们必须处理的唯一问题是 React 组件生命周期。

ขออภัย! คุณไม่ได้รับสิทธิ์ในการดำเนินการในส่วนนี้ กรุณาเลือกอย่างใดอย่างหนึ่ง ลงชื่อเข้าใช้ | ลงทะเบียน

รายละเอียดเครดิต

ข้อความล้วน|อุปกรณ์พกพา|ประวัติการแบน|DEEPZONE

GMT+7, 2024-5-23 14:15 , Processed in 0.038809 second(s), 18 queries .

Powered by Discuz! X3.5, Rev.3

Copyright © 2001-2021 Tencent Cloud.

ตอบกระทู้ ขึ้นไปด้านบน ไปที่หน้ารายการกระทู้