Preview an audio file before Post - php

Question

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.

Answer 1

Thanks JWarner that link was a nice starting point, learnt a lot in my almost 5 hours researching this and ended up finding a solution here Reading files in JavaScript using the File APIs
here is how I did it:
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('files').addEventListener('change', handleFileSelect,false);
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (f.type.match('image.*')) {
var reader = new FileReader();
alert('e.target.result');
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '" width="230" height="270"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
}else if (f.type.match('audio.*')){
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<audio controls><source src="', e.target.result,' "type="audio/ogg"><source src="', e.target.result,' "type="audio/mpeg"></audio>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
}
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
} }, false);
Please point out any weak points in this code if there are any
Thank You

Answer 2

Here is something that may help you, allowing you to circumvent the use of Java and make use of bare HTML instead.
I also hope it doesn't insult you to point out that, I'm not sure there's a way to just "preview" a song, and that you may have to host shortened versions of the song that serve as preview-length, for your scripts to play, rather than having the code automatically truncate them.