WEB JS 选择本地手机录音文件上传并播放

在Web应用程序中，允许用户从手机录音文件库选择音频并上传到服务器，并在线播放，通常涉及以下几个步骤：

1. **权限请求**：首先，你需要用户的录音权限。这通常通过浏览器的安全API（如`getUserMedia`）来请求麦克风访问权限。

2. **录音功能**：当用户同意录音后，可以使用`navigator.mediaDevices.getUserMedia()`捕获录音。例如，下面的代码片段创建了一个录音按钮，点击后开始录制：

   const recordButton = document.querySelector('#record-button');
   const audioRecorder = new MediaRecorder();
   
   recordButton.addEventListener('click', async () => {
     try {
       await navigator.mediaDevices.getUserMedia({audio: true});
       audioRecorder.start();
       recordButton.textContent = 'Stop Recording';
     } catch (err) {
       console.error('Failed to access microphone:', err);
     }
   });

3. **录音文件保存和上传**：当用户停止录音后，`stop`方法会结束录音并将生成的Blob存储起来。然后可以将Blob转换为Base64编码并上传到服务器：

   audioRecorder.ondataavailable = function(e) {
     const recordedAudio = e.data;
     // 对Blob进行Base64编码
     const blobDataUrl = window.URL.createObjectURL(recordedAudio);

     // 上传到服务器
     fetch('/api/upload', {
       method: 'POST',
       body: blobDataUrl,
       headers: { 'Content-Type': 'audio/*' },
     })
       .then(response => response.json())
       .then(data => {
         // 上载成功后，播放上传的音频
         playUploadedAudio(blobDataUrl, data.url);
       });
   };

4. **播放已上传音频**：在服务器返回新生成的音频URL后，使用`<audio>`标签加载并播放：

   function playUploadedAudio(url, remoteUrl) {
     const player = new Audio(remoteUrl || url);
     player.src = url;
     player.play();
   }

请注意，由于安全限制，直接在网页上回放录音文件可能受到限制，实际应用中可能需要后端支持。同时，为了保护用户隐私，录音数据应在用户不再需要时及时清除。