php - 投稿前に音声ファイルをプレビューする

Question

私が与えられたタスクは、POST の前にプレビュー付きの画像/オーディオ ファイルのアップロードまたはリンク ページを作成することです。

どのくらい遅れているかわかりませんが、Html5 オーディオ タグを発見したばかりです。アップロードする前に選択したオーディオ ファイルをプレビューする方法を知りたいです。

ここに私のアップロードフォームがあります:

<form id="attach" action="imageUpload.php" method="POST" enctype="multipart/form-data" >
            <h2>Select An Audio File to Upload</h2>
            <br>
            <div>

            <input type='file' id="files" name="files" multiple onchange="previewAudio(this);" />
            <br>
            <br>
            <output id="list"></output>
            <ul>
                <li>
            <label for="caption">Caption</label>
            <input type="text" maxlength="30"  name="caption" id="caption" />
                </li>
                <li>
                    <textarea id="desc" name="desc" rows="4" cols="32">Description

                    </textarea>
                </li>
            </ul>
            <audio controls>                    
                <source id="test3" src="" type="audio/mpeg">
                Your browser does not support the audio element.
            </audio>               
            <input type="submit" value="Upload"/>
            </div>
        </form>

プレビューするために試したコードは次のとおりです。

function previewAudio(input)
    {
        if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
        $('#test3').attr('src', e.target.result);
        }
            reader.readAsDataURL(input.files[0]);
        }

    }

私はこれが機能するはずだと強く主張していますが、そうではありません。修正や新しい方法は高く評価されます

前もって感謝します。