在h5端实现录制音频 完成后上传到服务器

在h5端实现录制音频并上传到服务器，可以使用浏览器提供的`MediaRecorder`API进行录制，然后使用`XMLHttpRequest`对象或`fetch`函数将录制完成的音频文件上传到服务器。

以下是一个简单的示例代码，仅供参考：

// 获取录音按钮和上传按钮
const recordBtn = document.querySelector('#record-btn');
const uploadBtn = document.querySelector('#upload-btn');

// 定义录音相关变量
let mediaRecorder = null; // MediaRecorder对象
let audioChunks = []; // 录音数据数组

// 点击录音按钮开始录音
recordBtn.addEventListener('click', () => {
  // 请求用户授权使用麦克风
  navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
      // 创建MediaRecorder对象
      mediaRecorder = new MediaRecorder(stream);
      // 监听数据可用事件
      mediaRecorder.addEventListener('dataavailable', event => {
        audioChunks.push(event.data);
      });
      // 开始录音
      mediaRecorder.start();
    });
});

// 点击上传按钮上传录音文件
uploadBtn.addEventListener('click', () => {
  // 停止录音
  mediaRecorder.stop();
  // 创建Blob对象
  const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
  // 创建FormData对象
  const formData = new FormData();
  formData.append('audio', audioBlob);
  // 发送POST请求上传文件
  fetch('/upload', {
    method: 'POST',
    body: formData
  })
    .then(response => {
      console.log(response);
    });
});

此代码使用了`MediaRecorder`API进行录音，并将录音数据存储在`audioChunks`数组中，在点击上传按钮时将数据数组转换为Blob对象并使用`fetch`函数发送POST请求上传到服务器。在服务器端可以通过解析HTTP请求中的`audio`字段获取Blob对象并保存为音频文件。