我正在处理音频文件上传,并希望在上传开始之前音频文件可用于音频播放器: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>
);
}
}
要在上传之前收听音频文件,您需要获取 Base64 字符串形式的音频文件。
- FileReader.readAsDataURL https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
然后您可以按照以下说明通过播放 Base64 字符串音频来收听音频。
- 播放 wav-声音文件-在-base64-with-javascript 中编码 https://stackoverflow.com/questions/17762763/play-wav-sound-file-encoded-in-base64-with-javascript
Thanks
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)