本文详细介绍了如何编写一个使用艾牧师使用React的语音到文本API。该网络应用程序将允许用户提交一个音频/视频文件，由艾牧师API。这个网络应用程序还允许用户使用他们的麦克风流音频，并从Rev.ai API接收实时语音到文本的转录。未来的艾牧师API将被称为API。

本文详细介绍了如何编写一个使用艾牧师使用React的语音到文本API。该网络应用程序将允许用户提交一个音频/视频文件，由艾牧师API。这个网络应用程序还允许用户使用他们的麦克风流音频，并从Rev.ai API接收实时语音到文本的转录。未来的艾牧师API将被称为API。

建筑学

与API的通信依赖于个人的访问令牌，该令牌也链接到支付信息，并可能产生费用。因此，访问令牌应该保密，以防止未经授权的使用。虽然在技术上可以直接从浏览器与api进行通信，但浏览器并不擅长保密。应该避免在浏览器中使用秘密和访问令牌。

服务器用于确保浏览器和API之间的通信安全。浏览器使用HTTP请求和WebSocket消息的组合与服务器通信。这个艾牧师NodeSDK用于与服务器的API通信。服务器还提供了一个webhook端点，当异步作业提交完成时，API可以调用该端点。

使用的第三方库

本文使用了以下第三方库：

• 反应-应用程序的前端是用React编写的。React是一个JavaScript库，用于创建交互式用户界面。尽管React可以用普通的JavaScript编写，但它也提供了一个JavaScript语法扩展JSX。JSX允许我们用JavaScript编写最终呈现给DOM的HTML元素。
• RecordRTC -RecordRTC库用于捕获用户的音频，对其进行编码并将其传输到服务器。
• 顺风CSS-Tailwindcss是一个实用程序优先的CSS框架，用于设计web应用程序前端的样式。
• ExpressJS-服务器是使用Express web framework在NodeJs中编写的。expressweb框架用于公开前端调用的HTTP端点。
• 套接字。IO -io库用于在前端和服务器之间提供实时双向通信。
• 相乘,Multer是一个中间件库，用于处理多部分/表单数据文件上传。

开发工具

以下工具用于开发项目:

• 积雪-Snowpack是一个前端构建工具，用于将反应代码构建为可由浏览器解释的JavaScript。
• 诺德蒙-Nodemon是一种开发工具，当工具检测到文件更改时，它会重新启动进程。对于这个项目，Nodemon在开发时通过在某个服务器源文件被更新时重新启动Express服务器来保持服务器代码的更新。
• 同时——concurrent是一种开发工具，它允许从一个流程控制多个流程。对于这个项目，concurrent在一个进程中控制Snowpack构建进程和Express服务器进程。

环境变量

需要定义以下环境变量：

• REVAI_ACCESS_TOKEN–rev.ai访问令牌
• WEBHOOK\u BASE\u URL–rev.ai应向其发送请求的基本URL，表明作业处理已完成
• 媒体路径–服务器上存储上传媒体文件的路径。

运行服务器

要运行开发服务器，请从命令行运行命令“npm run dev”。此命令将同时用于运行Snowpack build命令和使用Nodemon启动Express服务器。对服务器源代码文件的任何更改都将使用更改重新启动服务器。对前端源的任何更改都将更新，但必须刷新浏览器窗口才能查看更改。

可以通过从命令行运行命令“npm start”来运行生产服务器。

useSocket钩

为了处理react中的Socket.io通信，创建了useSocket自定义挂钩。钩子在第一次创建钩子时就创建了一个与Socket.io的连接。对钩子的后续调用使用相同的连接。此挂钩允许单个组件侦听组件内的套接字消息。

用户界面

用户界面由两个独立的选项卡组成，可以通过选择适当的选项卡头进行切换。

异步选项卡

当选择async选项卡时，将呈现AsyncForm组件。AsyncForm演示了API的异步功能。AsyncForm封装了以下内部组件:

• 媒体上传器–此组件用于选择要上载并提交到服务器的文件。
• 媒体播放器-该组件用于显示媒体文件和检索当前作业要加载的标题。
• TranscriptionViewer–此组件从服务器获取并显示当前作业的转录。仅当设置了作业对象时，才会渲染此组件。

首次呈现AsyncForm时，将显示MediaUploader。首先，用户选择要由API处理的音频或视频文件。单击“提交”按钮后，文件将作为多部分表单数据上载到服务器上的“/api/media”端点。Multer将文件存储在服务器上。作业提交到API时，URL指向上传的媒体文件，同时URL指向指向“/API/job endpoint”的webhook。

当API完成作业处理后，它会向webhook端点发送一个包含处理作业信息的HTTP POST请求。然后，服务器使用WebSocket连接将响应从API发送到浏览器。将状态200返回给API。

当useSocket钩子接收到作业消息时，它将作业对象设置为状态，并重新呈现asyncForm组件。

加载完作业对象后，MediaPlayer会检索标题并将其加载到视频元素中。MediaUploader也被替换为转录查看器。然后，转录查看器检索当前作业的转录并显示它。

流媒体选项卡

选择“流”选项卡后，将渲染StreamingForm组件。StreamingForm组件演示了API的流功能。StreamingForm封装了以下组件：

• 流线型控制器–该组件控制流的启动和停止。
• StreamingCaptionViewer–此组件侦听并显示转录套接字消息。

首先，用户单击开始流媒体按钮以启动流媒体会话。单击按钮后，浏览器会向服务器发送请求，以打开与API的流式连接。

StreamingController监听流连接的套接字消息，开始使用RecordRCT库捕获麦克风音频。RecordRTC库将音频编码为wav格式。编码的输出然后通过WebSocket连接流送到服务器。

然后服务器将数据发送到API。然后，API在转录信息被处理时实时发送回转录信息。当服务器从API接收数据并通过WebSocket发送给浏览器时。StreamingCaptionViewer监听通过套接字连接发送的转录，并将其呈现在页面上。

单击“停止流媒体”按钮时，浏览器会向服务器发送请求，以关闭与API的连接。然后，服务器关闭与API的流连接。

为什么要使用Rev AI？

精确

在提供自动化服务时，准确性非常重要。对于ASRs来说，一个关键的准确性测量是字错误率(WER)。WER是用错误数除以总字数来衡量的。错误包括誊写错误的单词、添加的额外单词和遗漏的单词。WER越低，ASR越准确。Rev AI的WER在其竞争对手中最低。

易用性

不需要学习一些新的专有格式。与API交互就像发送HTTP请求一样简单。API以明文或JSON进行响应。

安全

与API的通信在传输和静止时都是加密的。您还可以控制您的数据。可以通过API端点删除数据，也可以从web应用程序创建删除策略。当需要更严格的控制时，本地解决方案允许您在自己的私有实例中运行语音到文本引擎。

定价

前5个小时的语音到文本翻译是免费的，这足以测试API。在此之后，每分钟的语音处理费用为0.035美元，四舍五入到最接近的15秒。一个小时长的音频文件大约需要2.10美元。