title: HTML5 audio player drag and drop
body: <p>I'm implementing audio player in html5, which has drag-drop option for load and play mp3 files, but I have problem with plaing the file.</p>
  
  <p>When the file is dropped on the area, I can see in the console properties of object, but there is no information about absolute path, because of security in web browser.</p>
  
  <p>Is there an option, how to play mp3 this way ?</p>
  
  <p>index.html and body content:</p>
  
  <pre><code>&lt;div style="border: 1px solid black; width: 200px; height: 50px; padding: 10px;"" id="cudl"&gt;add file here&lt;/div&gt;
  &lt;div id="play" style="border: 1px solid black; width: 200px; height: 50px; padding: 10px;"&gt;PLAY&lt;/div&gt;
  &lt;div id="pause" style="border: 1px solid black; width: 200px; height: 50px; padding: 10px;"&gt;PAUSE&lt;/div&gt;
  &lt;div id="progress" style="width: 1000px; height: 50px; background: black; "&gt;&lt;div id="time" style="width: 0%; height: 50px; background: green;"&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>window.onload = function () {
      var cudl = document.getElementById("cudl");
      cudl.addEventListener("dragover", function (ev) {
          ev.preventDefault();
      }, false);
      cudl.addEventListener("drop", function (ev) {
          ev.preventDefault();
          var data = ev.dataTransfer.getData("audio/mpeg");
  
          var allAudio = document.getElementsByTagName("audio");
          if (allAudio.length &gt; 0) {
              for (var i = 0; i &lt; allAudio.length; i++) document.body.removeChild(allAudio[i]);
          }
          var audio = document.createElement("audio");
          audio.setAttribute("src", ev.dataTransfer.files[0].name);
          document.body.appendChild(audio);
  
          console.log("append file");
          console.log(ev.dataTransfer.files[0]);
  
          audio.addEventListener("durationchange", function () {
              console.log("dc " + this.duration);
          });
  
          audio.addEventListener("timeupdate", function () {
              //console.log("ct " + this.currentTime);
              var prog = document.getElementById("time");
              prog.style.width = Math.floor(this.currentTime / this.duration * 100) + "%";
          });
  
          var play = document.getElementById("play");
          play.addEventListener("click", function () {
              document.getElementsByTagName("audio")[0].play();
          });
  
          var pause = document.getElementById("pause");
          pause.addEventListener("click", function () {
              document.getElementsByTagName("audio")[0].pause();
          });
  
      }, false);
  };
  </code></pre>