时间戳

首页 > 解决方案 > React：如何在上传前读取音频文件并提供预览？

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

问题描述

我正在上传音频文件，并希望在上传开始之前音频文件可用于音频播放器：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>
    );
  }
}

标签： reactjs

解决方案

要在上传之前收听音频文件，您需要将音频文件作为 base64 字符串获取。

  • [ https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL ]

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

  • [ https://stackoverflow.com/questions/17762763/play-wav-sound-file-encoded-in-base64-with-javascript ]

谢谢

推荐阅读