Javascript 如何在更改输入文件的情况下预览音频
我想在选定的文件上播放音频文件 有人能帮我吗Javascript 如何在更改输入文件的情况下预览音频,javascript,jquery,html,Javascript,Jquery,Html,我想在选定的文件上播放音频文件 有人能帮我吗 <input type="file" name="fileAudio" value="" /> <audio controls="controls" id="audioPreview"> <source src="" type="audio/mp4" /> </audio> 顺便说一句,我最近需要这样一种方法,并得到了这个解决方案 很简单。更改文件时只需设置一个方法 Html: 可能重复
<input type="file" name="fileAudio" value="" />
<audio controls="controls" id="audioPreview">
<source src="" type="audio/mp4" />
</audio>
顺便说一句,我最近需要这样一种方法,并得到了这个解决方案 很简单。更改文件时只需设置一个方法 Html: 可能重复的
<input type="file" name="fileAudio" value="" onchange="PreviewAudio(this, $('#audioPreview'))" />
<audio controls="controls" id="audioPreview" style="display:none">
<source src="" type="audio/mp4" />
</audio>
function PreviewAudio(inputFile, previewElement) {
if (inputFile.files && inputFile.files[0] && $(previewElement).length > 0) {
$(previewElement).stop();
var reader = new FileReader();
reader.onload = function (e) {
$(previewElement).attr('src', e.target.result);
var playResult = $(previewElement).get(0).play();
if (playResult !== undefined) {
playResult.then(_ => {
// Automatic playback started!
// Show playing UI.
$(previewElement).show();
})
.catch(error => {
// Auto-play was prevented
// Show paused UI.
$(previewElement).hide();
alert("File Is Not Valid Media File");
});
}
};
reader.readAsDataURL(inputFile.files[0]);
}
else {
$(previewElement).attr('src', '');
$(previewElement).hide();
alert("File Not Selected");
}
}