title: How to Save/Download a mp3 DataURL object using java script?
body: <p>I allow the user to select a <code>mp3</code> file from the local file System and then 
  allow to download the same file. Its for learning purpose.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
              window.onload = function() {
                  document.querySelector('#musicFile').addEventListener('change', function(e){
                              var file = e.target.files[0];
                              console.log(e, file);
                              if(file.type.match('audio.*')) { // if its an audio file
                                  var fReader = new FileReader();
  
                                  fReader.onload = function(ev) {  //onload event
  
                                      var dataUrl  = ev.target.result;
  
  
                                      var downloadCon = document.querySelector('#download') 
                                      downloadCon.href = dataUrl;
                                  };
  
                                  fReader.readAsDataURL(file);  //start reading the file 
                              }
                          });
              }
          &lt;/script&gt;
  </code></pre>
  
  <p>The HTML body:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="controls"&gt;  
                  &lt;input type="file" id="musicFile"&gt;
                  &lt;a id='download'href='#' download='music.mp3' class='downloadLink'&gt;
                      Download File
                      &lt;/a&gt;
              &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>When I click the <code>Download File</code>, nothing happens. Can you tell me what am I doing wrong?</p>