如何在更改的输入文件上预览音频

Question

我要在所选文件上播放音频文件

任何人都可以帮助我。

<input type="file" name="fileAudio" value="" />

<audio controls="controls" id="audioPreview">
      <source src="" type="audio/mp4" />
</audio>

Answer 1

顺便说一句，我最近需要这种方法并获得了解决方案

很简单。只需在更改文件时设置一个方法即可。

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>

Javascript：

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