title: Preview an audio file before Post
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>here's my upload form:</p>
  
  <pre><code>&lt;form id="attach" action="imageUpload.php" method="POST" enctype="multipart/form-data" &gt;
              &lt;h2&gt;Select An Audio File to Upload&lt;/h2&gt;
              &lt;br&gt;
              &lt;div&gt;
  
              &lt;input type='file' id="files" name="files" multiple onchange="previewAudio(this);" /&gt;
              &lt;br&gt;
              &lt;br&gt;
              &lt;output id="list"&gt;&lt;/output&gt;
              &lt;ul&gt;
                  &lt;li&gt;
              &lt;label for="caption"&gt;Caption&lt;/label&gt;
              &lt;input type="text" maxlength="30"  name="caption" id="caption" /&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;textarea id="desc" name="desc" rows="4" cols="32"&gt;Description
  
                      &lt;/textarea&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;audio controls&gt;                    
                  &lt;source id="test3" src="" type="audio/mpeg"&gt;
                  Your browser does not support the audio element.
              &lt;/audio&gt;               
              &lt;input type="submit" value="Upload"/&gt;
              &lt;/div&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>here is the code I've been playing with tryin to get it to preview:</p>
  
  <pre><code>function previewAudio(input)
      {
          if (input.files &amp;&amp; input.files[0]) {
          var reader = new FileReader();
          reader.onload = function (e) {
          $('#test3').attr('src', e.target.result);
          }
              reader.readAsDataURL(input.files[0]);
          }
  
      }
  </code></pre>
  
  <p>I'm most adamant that this should work but its not, any fixes or new methods will be highly appreciated </p>
  
  <p>Thanks in advance.</p>