Question

我正在使用React组件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将此音频上传到我的Amazon s3存储。还有其他方法可以将此blobUrl转换为音频，然后将其上传到s3存储吗？

Answer 1

我的第一个问题是为什么audio.play（）可以工作，但audio.duration返回NaN吗？

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

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

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

第二，我想使用rest-api将此音频上传到我的Amazon s3存储。还有其他方法可以将此blobUrl转换为音频，然后将其上传到s3存储吗？

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

Answer 2

您可以尝试这样：

let duration, retry;
const limit = 50;
function getDuration(audio) {
  if(audio.duration > 0){
    duration = audio.duration;
    return;
  }
  if(retry > limit) { return }
  setTimeout(() => {
    retry++;
    getDuration(audio)
  }, 40);
}

react.js-audio.duration返回NaN和如何将blobUrl上传到亚马逊S3

2 个答案: