基于Web语音录制

  基于Web的语音录制和处理流程，主要包括开始录音、停止录音以及将录音数据发送给后端服务器的功能。

1. 准备录音环境

  在Web应用中实现录音功能首先需要用户授权。下面的recStart函数展示了在用户同意的情况下开始录音：

async function recStart() {
  if (recording.value || loading.value)
    return;  // 检查是否已经在录音或正在处理其他录音

  recOpen(() => {
    _recStart();  // 实际启动录音的内部函数
  });
}

  首先检查是否正在录音或加载录音设备，若已在进行中，则不再重复执行。recOpen函数打开录音设备并获取权限，一旦设备准备就绪，便调用_recStart来开始录音。

2. 停止录音并处理数据

  停止录音停止捕捉声音及后续的数据处理，如下所示：

async function recStop() {
  if (!rec) {
    recording.value = false;
    return; // 如果录音设备未准备好，则直接返回
  }

  sendingRecord.value = true;  // 标记开始处理录音数据

  // 停止录音并处理录音数据
  rec.stop(async (blob: Blob) => {
    rec.close();  // 关闭录音设备
    rec = null;  // 清除录音设备引用

    recording.value = false;  // 更新录音状态为非录音
    if (!blob)
      return;  // 如果没有录音数据，则直接返回

    controller = new AbortController();  // 创建一个控制器，用于可能需要取消的请求

    let options: Chat.ConversationRequest = {};  // 准备发送数据时的配置选项
    const lastContext = conversationList.value[conversationList.value.length - 1]?.conversationOptions;

    if (lastContext)
      options = { ...lastContext };  // 如果有上下文配置，则使用上次的配置

    const formData = new FormData();
    formData.append('audio', blob, 'recording.wav');  // 封装录音数据

  用户完成录音后处理音频数据：首先停止录音，然后关闭和销毁录音设备。若录音有效，则构建表单数据并通过fetchAPI将音频文件上传至服务器。

3. 实时反馈与错误处理

  在实际应用中，向用户提供实时反馈和适当的错误处理是至关重要的。这不仅提升用户体验，还有助于调试和维护：

try {
      await fetchAudioChatAPIProcess({
        formData,
        options,
        onDownloadProgress: ({ event }) => {
          const xhr = event.target;
          let { responseText } = xhr;
          responseText = removeDataPrefix(responseText);
          prompt.value = responseText;  // 更新提示信息为服务器响应的内容
          isAudioPrompt.value = true;  // 标记为音频提示信息

          // 如果服务器返回错误信息，进行处理
          const isError = isServerError(responseText);
          if (isError) {
            updateChat(
              +uuid,
              dataSources.value.length - 1,
              {
                dateTime: new Date().toLocaleString(),
                text: t(`server.${getServerErrorType(responseText)}`),
                inversion: false,
                error: true,
                loading: false,
                requestOptions: { prompt: '', ...options },
              },
            );
            scrollToBottom();  // 滚动到聊天界面底部

            loading.value = false;
            sendingRecord.value = false;

            return;  // 处理完毕，退出函数
          }

          onConversation();  // 开始新的对话
        },
      });
    } catch (error) {
      console.error('Error processing audio chat:', error);  // 处理过程中出现错误
    }
  });

这里的isServerError函数用来判断服务器响应是否表示有错误发生，如果是，则更新聊天界面来通知用户。