山东大学项目实训（六）语音数据接收播放

目录

前言

一、前端传输数据给后端

1、传输数据

2、处理返回数据

总结

---

前言

时间 5.20-5.26 第八周 项目实训

项目名称：雅思ai口语老师

目标：学习相关知识，搭建雅思ai口语老师前端框架

---

一、前端传输数据给后端

1、传输数据

首先构建请求URL，其次创建FormData对象

由于语音数据通常是以 Blob 格式存在的二进制数据，而传输文件通常需要使用多部分表单数据格式，因此选择 FormData 可以很方便地将 Blob 数据包装成符合要求的格式进行传输

使用 FormData 对象的 append 方法

模拟了用户上传了一个名为 'user.wav' 的音频文件

最后发送post请求

在请求配置中指定了请求头 'Content-Type' 为 'multipart/form-data'，告诉服务器发送的是多部分表单数据。

2、处理返回数据

如果 userMsg 不是一个数字，说明它是一条用户消息，条件成立，执行下面的代码块。

time: new Date().toLocaleTimeString(), // 获取当前时间，并转换为字符串格式，赋值给 time 字段

parseFloat(response.data.score.accuracy_score) 用于将响应数据中的准确度得分字段转换为浮点数，

读取后台处理数据的评分

然后将数据传输到

this.messages.push(usrRes)
message数组

然后调用

this.sendMessage(usrRes.content)方法

总结