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
}