Read MIDI File

from file:

from URL:

from Base64 string:

no file selected

Page source

<!DOCTYPE html>
<html>
<head>
<title>Read MIDI File</title>
<script src="JZZ.js"></script>
<script src="JZZ.midi.SMF.js"></script>
<script src="JZZ.synth.Tiny.js"></script>
</head>

<body>
<h1>Read MIDI File</h1>

<h2>from file:</h2>
<p><input type=file id=file size=80 onchange='fromFile();'></p>

<h2>from URL:</h2>
<form onsubmit='fromURL(); return false;'>
<p><input type=text id=url size=80><input type=submit value=Submit...></p>
</form>

<h2>from Base64 string: <button onclick='fromBase64();'>Read...</button></h2>
<p id=log>no file selected</p>
<p><button id=btn onclick='playStop()' disabled>Play</button></p>

<script><!--
var log = document.getElementById('log');
var btn = document.getElementById('btn');
function report(s) { return function() { log.innerHTML = s; }; }

JZZ.synth.Tiny.register('Web Audio');
var out = JZZ().or(report('Cannot start MIDI engine!')).openMidiOut().or(report('Cannot open MIDI Out!'));
var player;
var playing = false;

function clear() {
  if (player) player.stop();
  playing = false;
  log.innerHTML = 'please wait...';
  btn.innerHTML = 'Play';
  btn.disabled = true;
}

function load(data, name) {
  try {
    player = JZZ.MIDI.SMF(data).player();
    player.connect(out);
    player.onEnd = function() {
      playing = false;
      btn.innerHTML = 'Play';
    }
    playing = true;
    player.play();
    log.innerHTML = name;
    btn.innerHTML = 'Stop';
    btn.disabled = false;
  }
  catch (e) {
    log.innerHTML = e;
  }
}

function playStop() {
  if (playing) {
    player.stop();
    playing = false;
    btn.innerHTML = 'Play';
  }
  else {
    player.play();
    playing = true;
    btn.innerHTML = 'Stop';
  }
}

function fromFile() {
  if (window.FileReader) {
    clear();
    var reader = new FileReader();
    var f = document.getElementById('file').files[0];
    reader.onload = function(e) {
      var data = '';
      var bytes = new Uint8Array(e.target.result);
      for (var i = 0; i < bytes.length; i++) {
        data += String.fromCharCode(bytes[i]);
      }
      load(data, f.name);
    };
    reader.readAsArrayBuffer(f);
  }
  else log.innerHTML = 'File API is not supported in this browser.';
}

function fromURL() {
  clear();
  var url = document.getElementById('url').value;
  try {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4) {
        if (this.status == 200) {
          var r, i;
          var data = '';
          r = xhttp.response;
          if (r instanceof ArrayBuffer) {
            r = new Uint8Array(r);
            for (i = 0; i < r.length; i++) data += String.fromCharCode(r[i]);
          }
          else { // for really antique browsers
            r = xhttp.responseText;
            for (i = 0; i < r.length; i++) data += String.fromCharCode(r.charCodeAt(i) & 0xff);
          }
          load(data, url);
        }
        else {
          log.innerHTML = 'XMLHttpRequest error';
        }
      }
    };
    try { xhttp.responseType = 'arraybuffer'; } catch (e) {}
    xhttp.overrideMimeType('text/plain; charset=x-user-defined');
    xhttp.open('GET', url, true);
    xhttp.send();
  }
  catch (e) {
    log.innerHTML = 'XMLHttpRequest error';
  }
}

var data='\
TVRoZAAAAAYAAQADAGRNVHJrAAAAGgD/AwtMaXR0bGUgTGFtZQD/UQMKLCsA/y8ATVRyawAAAPMA/wMG\
THlyaWNzAP8BGEBUTWFyeSBXYXMgQSBMaXR0bGUgTGFtZWT/AQNcTWFL/wEDcnkgGf8BBHdhcyAy/wEC\
YSAy/wEDbGl0Mv8BBHRsZSAy/wEFbGFtZSxk/wEEL0xpdDL/AQR0bGUgMv8BBWxhbWUsZP8BBC9MaXQy\
/wEEdGxlIDL/AQVsYW1lLGT/AQMvTWFL/wEDcnkgGf8BBHdhcyAy/wECYSAy/wEDbGl0Mv8BBHRsZSAy\
/wEFbGFtZSwy/wEDL0EgMv8BA2xpdDL/AQR0bGUgMv8BBWxhbWUgMv8BBHdhcyAy/wEEc2hlIQD/LwBN\
VHJrAAAA8gD/AwVNdXNpYwDAC2SQQH9LgEBAAJA+fxmAPkAAkDx/MoA8QACQPn8ygD5AAJBAfzKAQEAA\
kEB/MoBAQACQQH9agEBACpA+fzKAPkAAkD5/MoA+QACQPn9agD5ACpBAfzKAQEAAkEN/MoBDQACQQ39a\
gENACpBAf0uAQEAAkD5/GYA+QACQPH8ygDxAAJA+fzKAPkAAkEB/MoBAQACQQH8ygEBAAJBAfzKAQEAZ\
kEB/GYBAQACQPn8ygD5AAJA+fzKAPkAAkEB/MoBAQACQPn8ygD5AAJA8f2RAZABDZABIf1qAPEAAQEAA\
Q0AASEAK/y8A';

function fromBase64() {
  clear();
  load(JZZ.lib.fromBase64(data), 'Base64 data');
}
--></script>

</body>
</html>

Using proxy

Proxy is a little server-side script that allows reading files from other domain as if they were at your own domain.

It can be as simple as this:

<?php
$url = $_REQUEST['url'];
if ($fp = fopen($url, "r")) while ($str = fread($fp, 1024)) echo $str;
?>

Make sure (or ask your hosting provider) that allow_url_fopen = On in your php settings.

All you have to do now, is to change

  xhttp.open('GET', url, true);

  xhttp.open('GET', 'proxy.php?url=' + encodeURIComponent(url), true);

in your JavaScript.