应用搭建

应用基于 html + javascript
使用的第三方 API 是 Assembly AI 提供的

Assembly AI

要使用 real-time transcript 功能，需要首先注册一个 Assembly AI 的 pro 套餐，
我默认存在里面 $5 作为我玩这个应用的费用
后面就是把这个 token 放到 server.js 的 authorization 里面

文件夹结构

.
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── css
│   ├── index.html
│   └── js
└── server.js

3 directories, 5 files

本代码基于 Assembly AI 官方推荐的基于 javascript 的代码，但是为了部署做了一些细节的调整，大家可以直接拿我的源码进行修改
尽量将所有的静态资源统一放在 public 文件夹下面

前端搭建

HTML

在这里插入图片描述

前端基于原生的 HTML 文件，需要注意的就是我在原代码的基础上增加了一个 <div> “all_text” 方便在每次一个人发言完成后，下一次发言另起一段，这样如果有多个人一起交流，就可以按照先后顺序进行显示，而源码中只是将一个人所有的发言放在一个段落 <p id="message"> 里面。

index.js

在这里插入图片描述

一开始我们通过 CSS 选择器来定位这几个 dom 对象，方便后面针对不同的 dom 进行操作
整体上来看，我们将一个 click 事件绑定在 button 上，当这个 click 发生的时候我们会启动 run 这个异步函数
run 中的主要代码逻辑在 26 行的 else 开始，这里如果不进行 Heroku 部署，那么相当于你将自己的 localhost 作为服务器，并且分配了一个端口（在我的程序中我是用了 30001 端口）并且分配了一个endpoint 也就是 /token 来指定访问后端的 token 端点来请求服务，这个服务后面我们需要结合后端的代码一起说。这里你只需要有个大致的理解，要想使用 Assembly AI 的 transcript 这个功能，我们需要一个 token 向 Assembly AI 证明自己的身份，因此当前端点击 record 按键的时候，它就要求后端去向 Assembly AI 请求这个 token
response 的结果就是这个 token
因此，前端再拿这个 token 直接与 Assembly AI 的服务器建立 Websocket 连接，注意这个只是点很重要，因为我们通常使用的都是 http 连接，但是 http 连接的问题在于它每次请求一组数据，每次请求完毕就会断掉连接，但是进行 transcript 是一个持续的过程，因此我们不能让连接断掉，所以使用 websocket 建立连接
如果后面需要部署 Heroku 的话，请求 token 的端点就要改成你自己部署的 Heroku 服务的 token 端点了
通过 Websocket 得到相应的 transcript 数据之后就按部就班地显示在前端就可以了

在这里插入图片描述

这里的 res 就是 Assembly AI 的 API 返回的数据，每条数据都会有一些属性（建议自己 debug 一下看看），其中 message_type 可以表明当前这句话是不是发言者结束发言的句子，如果是，我在这里让下一次识别的结果在一个新起的段落中显示。

后端搭建

server.js

在这里插入图片描述
需要注意：

设定静态的文件夹，这个对于 Heroku 非常重要，如果不在这里指定，那么在 Heroku 部署之后不会显示前端的页面
authorization: 后面的东西需要你注册一个 Assembly AI 的 pro 套餐才能使用，他会给你一个 key，你拿到这个 key 才能向 Assembly AI 的后台申请到 token 用于文本转录
port 的指定，如果在本地的话，你可以直接写成任意端口，但是在 Heroku 的部署过程中，它需要给你实时分配端口，因此写成 process.env.PORT || 30001 ，这个意思就是，如果服务器部署的时候 30001 端口可用就用，不可用就自动分配一个
server.js 本质上只做了一件事情，就是通过 key 向 Assembly AI 后台请求一个 token 并且返回给前端