Preview an audio file before Post

Preview an audio file before Post

I am new here apologies for any anomalies, The task I've been given is to
create an image/audio file upload or link page with preview before POST.
Not sure how late I am but just discovered Html5 audio tag, I'd like to
know how to preview an audio file on selection before upload.
here's my upload form:
<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>
here is the code I've been playing with tryin to get it to preview:
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]);
}
}
I'm most adamant that this should work but its not, any fixes or new
methods will be highly appreciated
Thanks in advance.