React.js - audio.duration 返回 NaN 以及如何将 blobUrl 上传到亚马逊 s3

Question

我正在使用反应组件ReactMediaRecorder使用以下代码捕获音频。它返回一个我在我的状态中设置的 blobUrl 。

<ReactMediaRecorder  
  audio
  whenStopped={blobUrl=>this.setState({ blobUrl })}
  render={({ status, startRecording, stopRecording, mediaBlob }) => (
    <div>
      <p>{status}</p>
      <button onClick={startRecording}>Start Recording</button>  
      <button onClick={stopRecording}>Stop Recording</button>  
      <audio src={mediaBlob} controls />  
    </div>  
  )}  
/> 

我的第一个问题是为什么 audio.play() 有效但 audio.duration 返回 NaN ？

let audio = new Audio(mediaBlob);
audio.play(); // this works
audio.duration //but this returns NaN

其次，我想使用rest-api 将此音频上传到我的亚马逊s3 存储。有没有其他方法可以将此 blobUrl 转换为音频，然后将其上传到 s3 存储？

Answer 1

我的第一个问题是为什么 audio.play() 有效但 audio.duration 返回 NaN ？

您需要等到 Audio 对象加载一些数据后才能获取持续时间。

audio.addEventListener('loadedmetadata', (e) => {
  console.log(e.target.duration);
});

此外，持续时间可能不可靠...... MediaRecorder 的浏览器实现存在一些问题，如果输出以块的形式流式传输，则无法可靠地设置长度。

其次，我想使用rest-api 将此音频上传到我的亚马逊s3 存储。有没有其他方法可以将此 blobUrl 转换为音频，然后将其上传到 s3 存储？

使用 Blob 实例本身作为请求正文。不要使用 blob URL。不要忘记设置Content-Type标题。