h5 实现录音并上传

在HTML5中，实现录音功能通常依赖于`getUserMedia` API，这是一个现代浏览器支持的功能，允许网页访问用户的音频设备。以下是基本步骤：

1. **获取录音权限**：
首先需要请求用户的麦克风权限，可以使用JavaScript的`navigator.mediaDevices.getUserMedia()`方法。

let stream;
navigator.mediaDevices.getUserMedia({audio: true})
   .then(function(deviceStream) {
       stream = deviceStream;
       // 这里可以开始监听流，如使用Web Audio API处理音频
   })
   .catch(function(err) {
       console.error('Error accessing microphone', err);
   });

2. **创建AudioRecorder实例**：
使用`Recorder.js`这样的库可以帮助你将音频数据转换为Blob对象，它是可以上传到服务器的数据格式。

let recorder = new Recorder(stream);

3. **录制音频**：
开始录音，一旦录制完成，会触发`onstop`事件。

recorder.start();
setTimeout(() => {
    recorder.stop();
}, 5000); // 录音5秒后停止

4. **保存录音到Blob**：
录制完成后，你可以通过`blob`属性得到音频文件。

5. **上传Blob到服务器**：
有了Blob，你可以将其转化为FormData或者其他可上传的方式，然后发送POST请求到服务器。

let formData = new FormData();
formData.append('file', blob);

fetch('/upload-audio', {
    method: 'POST',
    body: formData,
}).then(response => response.text())
   .catch(error => console.error('Error uploading:', error));