React: How to read audio file and provide preview before upload?

Question

I am working on a audio file upload and want that the audio file is available for the audio player before the upload starts: 1) the user selects the audio file, 2) the audio file is available for listening (as kind of preview), 3) if everything is ok, the user presses submit.

I worked on step one and basically created a file input (that works). However, when I link the selected audio file to the Audio Player, it is not available. Now I wonder if I did something wrong or if I have a wrong idea about how audio preview works.

export class AudioUploadView extends Component {

constructor(props) {
    super(props);
    this.onClickResetAudioFile = this.onClickResetAudioFile.bind(this)
    this.onChangeAudioFile = this.onChangeAudioFile.bind(this)
    this.inputRef = React.createRef();


  this.state = {
    selectedFile: null
  };

}

onChangeAudioFile(e){

  this.setState({selectedFile: e.target.files [0]}, () => {
    console.log (this.state.selectedFile)} );

  // pass file to props to make it available to parent component
  var data = e.target.files [0];
  this.props.AudioFileCallback(data);

  //console.log (data)
}


onClickResetAudioFile (e) {
 this.setState({selectedFile:null}); // celears state
 this.inputRef.current.value = "" // clears form

}

showResetButton(){
  if (this.state.selectedFile) {

    return (
        <button onClick={this.onClickResetAudioFile}> Clear! </button> 
    );
} else {
  return (
        <div>{null}</div>

  );
}
}

showFileData() {
  if (this.state.selectedFile) { 
          return ( 
            <div> 
              <h2>File Details:</h2> 
              <p>File Name: {this.state.selectedFile.name}</p> 
              <p>File Type: {this.state.selectedFile.type}</p> 
              <p> 
                Last Modified:{" "} 
                {this.state.selectedFile.lastModifiedDate.toDateString()} 
              </p>

                          <audio
                controls
                src={this.state.selectedFile}>
                    Your browser does not support the
                    <code>audio</code> element.
            </audio>


              {this.showResetButton()} 

            </div> 
          ); 
        } else { 
          return ( 
            <div> 
              <br /> 
              <h4>Choose before Pressing the Upload button</h4> 
            </div> 
          ); 
        } 
}



  render() {
    var file = this.state.selectedFile
    //console.log (this.state.selectedFile)
    return (
      <React.Fragment>
      <div className="card card-body mt-4 mb-4">




           <div>
          <input type="file" onChange={this.onChangeAudioFile} ref={this.inputRef} /> 
          </div> 




          {this.showFileData()} 


      </div>
      </React.Fragment>
    );
  }
}

Answer 1

To listen audio file before uploading, you do need to get the audio file as a base64 string.

• FileReader.readAsDataURL

And then you can listen to the audio by playing the base64 string audio by following the below instruction.

• play-wav-sound-file-encoded-in-base64-with-javascript

Thanks

Answer 2

You can use URL.createObjectURL() like this.

this.setState({selectedFile: URL.createObjectURL(e.target.files [0])}, () => {
console.log (this.state.selectedFile)} );

Hope this works.