如何在更改了输入文件的情况下预览音频

Posted 2023-02-25

【中文标题】如何在更改了输入文件的情况下预览音频

【英文标题】：How To Preview Audio With Input File On Changed

【发布时间】：2019-02-27 06:56:49

【问题描述】：

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

谁能帮帮我。

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

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

【问题讨论】：

Play audio local file with html的可能重复

【参考方案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");