Separate html "shell" javascript; player now standalone

Closes #3.

The code which defines what the buttons do and downloads songs and so
forth are now completely separated from the player, which has the
following API:

 - `XMPlayer.initAudio` -> starts up audio context; it's available as
   `XMPlayer.audioctx`
 - `XMPlayer.loadXM(ArrayBuffer)` -> returns `true` if loaded, otherwise
   barfs randomly
 - `XMPlayer.playXM()` -> starts playing
 - `XMPlayer.pauseXM()` -> obvious
 - `XMPlayer.stopXM()` -> obvious; call this before loading a new one

Loading trackview.js is now optional; without it, the player won't do
any visualizations. Or, you can override the following to get callbacks:

 - `XMView.pushEvent(e)` -> push an audio event onto the queue. Called
   once per tick (about 50Hz, controlled by song). `e` contains fields:
   - `t` - audio timestamp
   - `vu` - Float32Array of RMS power (volume) for each channel
   - `scopes` - [Float32Array] of oscilloscope data, one array per
     channel; `XMView.scope_width` contains # of samples to produce here
   - `songpos` - position in the song (# patterns played)
   - `pat` - pattern number currently playing
   - `row` - row within pattern
 - `XMView.pause()` - pause visualization
 - `XMView.stop()` - stop/reset visualization

shell.js

@@ -0,0 +1,111 @@
+(function (window, document) {
+if (!window.XMPlayer) {
+  window.XMPlayer = {};
+}
+var XMPlayer = window.XMPlayer;
+if (!window.XMView) {
+  window.XMView = {};
+}
+var XMView = window.XMView;
+
+function loadXMAndInit(xmdata) {
+  if (!XMPlayer.loadXM(xmdata)) {
+    return;
+  }
+
+  XMView.init();
+
+  var playbutton = document.getElementById("playpause");
+  playbutton.innerHTML='Play';
+  playbutton.onclick = function() {
+    if (XMPlayer.playing) {
+      XMPlayer.pauseXM();
+      playbutton.innerHTML='Play';
+    } else {
+      XMPlayer.playXM();
+      playbutton.innerHTML='Pause';
+    }
+  };
+  playbutton.disabled = false;
+
+  return XMPlayer.xm;
+}
+
+function downloadXM(uri) {
+  var xmReq = new XMLHttpRequest();
+  xmReq.open("GET", uri, true);
+  xmReq.responseType = "arraybuffer";
+  xmReq.onload = function (xmEvent) {
+    var arrayBuffer = xmReq.response;
+    if (arrayBuffer) {
+      loadXMAndInit(arrayBuffer);
+    } else {
+      console.log("unable to load", uri);
+    }
+  };
+  xmReq.send(null);
+}
+
+XMPlayer.allowDrop = function(ev) {
+  ev.stopPropagation();
+  ev.preventDefault();
+  var elem = document.getElementById("playercontainer");
+  elem.className = (ev.type == "dragover" ? "draghover" : "playercontainer");
+  return false;
+};
+
+XMPlayer.handleDrop = function(e) {
+  console.log(e);
+  e.preventDefault();
+  var elem = document.getElementById("playercontainer");
+  elem.className = "playercontainer";
+  var files = e.target.files || e.dataTransfer.files;
+  if (files.length < 1) return false;
+  var reader = new FileReader();
+  reader.onload = function(e) {
+    XMPlayer.stopXM();
+    loadXMAndInit(e.target.result);
+  };
+  reader.readAsArrayBuffer(files[0]);
+  return false;
+};
+
+function initFilelist() {
+  var el = document.getElementById('filelist');
+  xmuris.forEach(function(entry) {
+    var a = document.createElement('a');
+    a.text = entry[0];
+    a.href = '#'+entry[1];
+    a.onclick = function() {
+      el.style.display = "none";
+      XMPlayer.stopXM();
+      downloadXM(baseuri + entry[1]);
+    };
+    el.appendChild(a);
+    el.appendChild(document.createElement('br'));
+  });
+  var loadbutton = document.getElementById('loadbutton');
+  loadbutton.onclick = function() {
+    if (el.style.display == "none") {
+      el.style.display = "block";
+    } else {
+      el.style.display = "none";
+    }
+  };
+}
+
+window.onload = function() {
+  XMPlayer.initAudio();
+  initFilelist();
+
+  var uri = location.hash.substr(1);
+  if (uri === "") {
+    uri = "kamel.xm";
+  }
+  if (!uri.startsWith("http")) {
+    uri = baseuri + uri;
+  }
+  downloadXM(uri);
+};
+
+})(window, document);