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");
    }
}