React.js - audio.duration 返回 NaN 以及如何将 blobUrl 上传到 amazon 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将此音频上传到我的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);
}

Answer 3

props 是对象有音乐，标题，.....

export const Duration = function ({props}) {
    const [duration, setDuration] = useState("00:00")
    const audio = new Audio(props.music)
    audio.onloadedmetadata = (e) => {
        if (audio.readyState > 0) {
            var minutes = "0"+parseInt(audio.duration / 60, 10);
            var seconds = "0"+parseInt(audio.duration % 60);
            setDuration(minutes + ":" + seconds.slice(-2))
        }
    }
    return duration
}