React：如何读取音频文件并在上传前提供预览？

Question

我正在处理音频文件上传，并希望在上传开始之前音频文件可用于音频播放器：1) 用户选择音频文件，2) 音频文件可供收听（作为预览）， 3）如果一切正常，用户按下提交。

我完成了第一步，基本上创建了一个文件输入（有效）。但是，当我将所选音频文件链接到音频播放器时，它不可用。现在我想知道我是否做错了什么，或者我对音频预览的工作原理是否有错误的想法。

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

要在上传之前收听音频文件，您需要获取 Base64 字符串形式的音频文件。

• FileReader.readAsDataURL

然后您可以按照以下说明通过播放 Base64 字符串音频来收听音频。

• 使用 JavaScript 播放以 Base64 编码的 wav 声音文件

谢谢