able to play local files now

src/static/index.html

@@ -89,6 +89,15 @@
               <input type="range" min="0" max="1000" value="700" class="slider" id="volume-slider">
             </div>
           </div>
+          <br>
+          <div class="row">
+            <div class="col-xs-6">
+              <p>
+                Wenn du eine Datei von deinem PC auswählen willst, drücke auf diesen Button:
+              </p>
+              <input id="extFile"  type="file" accept=".mp3,audio/*" >
+            </div>
+          </div>
         </div>
         <footer>
           <p>

src/static/js/index.js

@@ -112,6 +112,24 @@ $(function () {
     $(this).trigger('change');
   });
 
+  $('#extFile').change(function () {
+    event = this
+    if (event.files.length > 0) {
+    var file = event.files[0];
+    var reader = new FileReader();
+    var songName = event.files[0].name;
+    reader.addEventListener('load', function() {
+      var data = reader.result;
+      if(player != null && player.isPlaying())
+        player.pause();
+      player = new Player(songName, data);
+      player.init();
+      updateDisplay();
+    });
+    reader.readAsDataURL(file);
+  }
+  });
+
   updateDisplay();
 });
 
@@ -186,10 +204,15 @@ function resetLoop(){
   $( '#resetLoopBtn' ).prop("disabled", true);
 }
 
-var Player = function(songName) {
+var Player = function(songName, data=null) {
-  this.song = songName;
+  if(data != null){
-  let dir = $( '#dir-dropdown' ).find(":selected").text();
+    this.song = songName;
-  this.url = './songs/' + dir + '/' + songName;
+    this.url = data;
+  }else{
+    this.song = songName;
+    let dir = $( '#dir-dropdown' ).find(":selected").text();
+    this.url = './songs/' + dir + '/' + songName;
+  }
   this.howl = null;
   resetLoop();