山东大学项目实训（五）实现录音功能

目录

前言

一、网页录音容器搭建

二、录音第三方库的调用

1、初始化对象

2、参考API文档

3、开始录音

4、结束录音

---

前言

时间 5.13-5.19 第五周 项目实训

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

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

实现录音功能

---

一、网页录音容器搭建

设置容器，触发后更改样式

效果如下

二、录音第三方库的调用

 选用js-audio-recorder，

js-audio-recorder 是一个用于浏览器端录音的 JavaScript 库，支持音频录制、播放、导出等功能。这个库利用了 Web Audio API 提供的能力，可以轻松地在 Web 应用中实现录音功能。

import Recorder from 'js-audio-recorder'

1、初始化对象

采样位数设置16位，效果较好，语音录制非音乐，故设置单声道，16000HZ的采样率适合人声，

故如此设置参数

2、参考API文档

• start(): 开始录音。
• stop(): 停止录音。
• play(): 播放录音。
• pause(): 暂停播放。
• resume(): 恢复播放。
• getWAVBlob(): 获取 WAV 格式的 Blob 对象。
• clear(): 清除当前录音数据。

3、开始录音

这里调用recorder.start（）一旦录音开始成功（即 Promise 被解决），then 方法中的回调函数就会被执行。在这个回调函数中，this.$message('speaking...') 用于显示一条消息，提示用户正在录音。

4、结束录音

首先：将 isRecording 的状态取反，以停止录音。然后将 isLoading 设置为 true，表示发送操作正在进行中。

其次：调用 recorder 对象的 getWAVBlob 方法获取录音数据的 Blob 对象

最后：调用 sendVoiceMessage 方法，将录音数据传递给该方法进行处理

样式如上