CODEWITHSUNDEEP
javascriptreactjsamazon-s3
Ameer Hamza
Ameer Hamza

Reputation: 407

React.js - audio.duration returns NaN & How to upload blobUrl to amazon s3

I'm using the react component ReactMediaRecorder to capture audio using the following code. it returns a blobUrl which I have set in my state.

<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>  
  )}  
/>

My First Question is Why does audio.play() works but audio.duration returns NaN ?

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

Second, I want to upload this audio to my amazon s3 storage using rest-api. Is there any other way to convert this blobUrl to audio and then upload it to s3 storage ?

Upvotes: 1

Views: 6082

Answers (3)

Phan Th&#224;nh C&#244;ng
Phan Th&#224;nh C&#244;ng

Reputation: 31

props is object have music, title, .....

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
}

Upvotes: 1

kukukukikii
kukukukikii

Reputation: 16

You may try like this:

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);
}

Upvotes: 0

Brad
Brad

Reputation: 163438

My First Question is Why does audio.play() works but audio.duration returns NaN ?

You need to wait until the Audio object has loaded some of the data before you'll be able to fetch the duration.

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

Additionally, the duration may be unreliable... there are some issues with browser implementations of MediaRecorder where the length can't be reliably set if the output is streamed in chunks.

Second, I want to upload this audio to my amazon s3 storage using rest-api. Is there any other way to convert this blobUrl to audio and then upload it to s3 storage ?

Use the Blob instance itself as the request body. Don't use the blob URL. Don't forget to set your Content-Type headers.

Upvotes: 6

Related Questions