Jazz-Soft.net

We make it sound!

Home » Examples » Read MIDI File

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 = xhttp.responseText;
          var data = '';
          for (var i = 0; i < r.length; i++) data += String.fromCharCode(r.charCodeAt(i) & 0xff);
          load(data, url);
        }
        else {
          log.innerHTML = 'XMLHttpRequest error';
        }
      }
    };
    xhttp.overrideMimeType('text/plain; charset=x-user-defined');
    xhttp.open('GET', url, true);
    xhttp.send();
  }
  catch (e) {
    log.innerHTML = 'XMLHttpRequest error';
  }
}

var data='\
TVRoZAAAAAYAAQADAGRNVHJrAAAAGgD/AwtMaXR0bGUgTGFtYgD/UQMKLCsA/y8ATVRyawAAAPIA/wMF\
V29yZHMA/wEYQFRNYXJ5IFdhcyBBIExpdHRsZSBMYW1lZP8BA1xNYTL/AQNyeSAy/wEEd2FzIDL/AQJh\
IDL/AQNsaXQy/wEEdGxlIDL/AQVsYW1lLGT/AQQvTGl0Mv8BBHRsZSAy/wEFbGFtZSxk/wEEL0xpdDL/\
AQR0bGUgMv8BBWxhbWUsZP8BAy9NYTL/AQNyeSAy/wEEd2FzIDL/AQJhIDL/AQNsaXQy/wEEdGxlIDL/\
AQVsYW1lLDL/AQMvQSAy/wEDbGl0Mv8BBHRsZSAy/wEFbGFtZSAy/wEEd2FzIDL/AQRoZXIhAP8vAE1U\
cmsAAAC5AP8DBU11c2ljAMALZJBAfzJAAAA+fzI+AAA8fzI8AAA+fzI+AABAfzJAAABAfzJAAABAf1pA\
AAo+fzI+AAA+fzI+AAA+f1o+AApAfzJAAABDfzJDAABDf1pDAApAfzJAAAA+fzI+AAA8fzI8AAA+fzI+\
AABAfzJAAABAfzJAAABAf1pAAAo+fzI+AAA+fzI+AABAfzJAAAA+fzI+AAA8f2RAZABDZABIf1o8AABA\
AABDAABIAAr/LwA=';

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);

to

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

in your JavaScript.

See also