尝试在 React 中播放上传的 mp3 时遇到了类似的挑战。能够根据之前在此处提供的 XHR 解决方案使其工作,但随后对其进行了调整以与 React refs 一起使用:
import {useState, useRef, useEffect} from 'react'
function FileUploadPage(){
const [selectedFile, setSelectedFile] = useState();
const [isFilePicked, setIsFilePicked] = useState(false);
const myRef = useRef(null)
const changeHandler = (event) => {
setSelectedFile(event.target.files[0]);
setIsFilePicked(true);
};
const playAudio = () => {
myRef.current.src = window.URL.createObjectURL(selectedFile)
myRef.current.play()
}
return(
<div>
<input type="file" name="file" onChange={changeHandler} />
{isFilePicked ? (
<div>
<p>Filename: {selectedFile.name}</p>
<p>Filetype: {selectedFile.type}</p>
<p>Size in bytes: {selectedFile.size}</p>
<p>
lastModifiedDate:{' '}
{selectedFile.lastModifiedDate.toLocaleDateString()}
</p>
<div>
<button onClick={playAudio}>
<span>Play Audio</span>
</button>
<audio ref={myRef} id="audio-element" src="" type="audio/mp3" />
</div>
</div>
) : (
<p>Select a file to show details</p>
)}
</div>
)
}