Fire JS Bin - MT32Emu

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

'use strict';
(function($, window, document, undefined) {
  var VERSION = '0.3.2';
  $('.version').html('v' + VERSION);

var Playlist = (function Playlist() {
    var $message = $('#message');
    var $player = $('#player');
    var $playpause = $player.find('.playpause').on('click', play);
    var $repeat = $player.find('.repeat').on('click', repeat);
    var $prev = $player.find('.prev').on('click', prev);
    var $next = $player.find('.next').on('click', next);

var $timeDuration = $player.find('.time.duration');
    var $timeCurrent = $player.find('.time.current');
    var $bar = $player.find('.bar').on('click', seek);
    var $barLoaded = $player.find('.bar .loaded');
    var $barPlayed = $player.find('.bar .played');
    var $volumeButton = $player.find('.volume .button').on('click', mute);;
    var $volumeAdjust = $player.find('.volume .adjust > div').on('click', volume);

var AudioContext = (window.AudioContext || window.webkitAudioContext);
    if (!AudioContext) {
      error('Sorry, your browser doesn\'t support Web Audio');
      return null;
    }

var list = [];
    var total = 0;
    var index = -1;
    var gain = 1;
    var repeating = 'none';
    var context = new AudioContext;
    var spectrum = Spectrum('visualizer');
    var player = MT32Player(context);

player
      .on('playing', spectrum.start)
      .on('resumed', spectrum.start)
      .on('paused', spectrum.stop)
      .on('finished', next)
      .on('stopped', stop)
      .on('length', length)
      .on('progress', progress)
      .on('loading', status)
      .on('crashed', status)
      .on('error', error)
      .on('log', message);

function log(msg) {
      // $message.removeClass('err').html(msg);
      // console.debug('log', msg);
    }

function error(msg) {
      $message.addClass('err').html(msg);
      console.warn(message);
      list = pop(list, index);
      index--;
      next();
    }

function status(state, song) {
      if (!state) {
        state = player.status();
      }

switch (state) {
        case 'length':
          $message.removeClass('err').html('#' + (index + 1) + '/' + list.length + ' "' + song.name + '"');
          break;
        case 'loading':
          $message.removeClass('err').html('Initializing Synth...');
        case 'stopped':
        case 'playing':
        case 'paused':
          $player.removeClass('loading crashed playing paused stopped').addClass(state);
      }

// console.debug('status', state);

return state;
    }

function prev() {
      if ($prev.hasClass('disable')) return;
      index--;
      if (list[index]) {
        player.play(list[index]);
      } else {
        stop();
      }
      update();
    }

function next(automatically) {
      if (automatically === true) {
        if (repeating === 'one') {
          index -= 1;
        }
        if (repeating === 'all' && !list[index + 1]) {
          index = -1;
        }
      }

if ($next.hasClass('disable')) return;

index++;
      if (list[index]) {
        // console.trace('play', index, list);
        player.play(list[index]);
      } else {
        stop();
      }

update();
    }

function play() {
      if ($player.hasClass('loading')) return;
      var state = player.status();

if (state === 'playing') {
        player.pause();
        status('paused');
      } else if (state === 'paused') {
        player.resume();
        status('playing');
      } else if (state === 'stopped') {
        index = -1;
        update();
        next();
      } else if (!state) {
        demo();
      }
    }

function stop(immediately) {
      var state = status();
      if (state !== 'stopped') {
        // console.debug('stop');
        player.stop(immediately);
        spectrum.stop();
        index = -1;
      }

$barPlayed.width(0);
      $timeCurrent.html('0:00');
      $timeDuration.html('0:00');
    }

function length(len, song) {
      total = parseFloat(len);
      $timeDuration.html(format(len));
      status('length', song);
      status('playing');
    }

function progress(time) {
      if (time === 0 || player.status() === 'playing') {
        var elapsed = time >> 0;
        var percent = total === 0 ? 0 : time / total;
        $barPlayed.width(100 * percent + '%');
        $timeCurrent.html(format(elapsed));
      }
    }

function repeat() {
      switch (repeating) {
        case 'none':
          $repeat.removeClass('disable');
          repeating = 'all';
          break;
        case 'all':
          $repeat.addClass('one');
          repeating = 'one';
          break;
        case 'one':
          $repeat.removeClass('one');
          $repeat.addClass('disable');
          repeating = 'none';
          break;
      }
      update();
      // console.debug(repeating);
    }

function format(num) {
      var min = num / 60 >> 0;
      var sec = String(num - 60 * min >> 0);
      if (sec.length === 1) {
        sec = '0' + sec;
      }
      return min + ':' + sec;
    }

function mute() {
      var curVol = Output.currentVol();
      if (curVol) {
        gain = curVol;
      }
      curVol = curVol ? 0 : gain;
      Output.setVol(curVol);
      $player.toggleClass('mute', !curVol);
    }

// toggleCompressor
    function volume(e) {
      var val = Math.abs(e.pageY - $volumeAdjust.offset().top - 100);
      $volumeAdjust.find('div').height(val);
      Output.setVol(val / 100);
    }

function volumeUp() {
      Output.increaseVol();
      $volumeAdjust.find('div').height(Output.currentVol() * 100);
    }

function volumeDown() {
      Output.decreaseVol()
      $volumeAdjust.find('div').height(Output.currentVol() * 100);
    }

function seek(e) {
      var max = $bar.width();
      var val = 1 - (e.pageX - $bar.offset().left - max) / -max;
      player.seek(val);
    }

function clear() {
      list.length = 0;
      stop(true);
    }

function add(fileOrPath) {
      list.push(fileOrPath);
      update();
    }

function pop(arr, i) {
      return (!i ? arr.slice(1) : arr.slice(0, i).concat(arr.slice(i + 1)));
    }

function update() {
      $prev.toggleClass('disable', !list.length || repeating === 'none' && !list[index - 1]);
      $next.toggleClass('disable', !list.length || repeating === 'none' && !list[index + 1]);
    }

function demo() {
      add('/assets/mt32/midi/Zeliard/01 - Opening Themes.MID');
      add('/assets/mt32/midi/Zeliard/02 - Introduction & Opening Theme.MID');
      add('/assets/mt32/midi/Zeliard/03 - Muralla Town.MID');
      add('/assets/mt32/midi/Zeliard/04 - Cavern Of Malicia.MID');
      add('/assets/mt32/midi/Zeliard/05 - Tumba Town.MID');
      add('/assets/mt32/midi/Zeliard/06 - Satono Town.MID');
      add('/assets/mt32/midi/Zeliard/07 - Bosque Village.MID');
      add('/assets/mt32/midi/Zeliard/08 - Cavern Of Peligro.MID');
      add('/assets/mt32/midi/Zeliard/09 - Cavern Of Madera.MID');
      add('/assets/mt32/midi/Zeliard/10 - Cavern Of Escarcha.MID');
      add('/assets/mt32/midi/Zeliard/11 - Cavern Of Corroer.MID');
      add('/assets/mt32/midi/Zeliard/12 - Cavern Of Caliente.MID');
      add('/assets/mt32/midi/Zeliard/13 - Cavern Of Tesoro.MID');
      add('/assets/mt32/midi/Zeliard/14 - Cavern Of Absor.MID');

add('/assets/mt32/midi/SILPMT.MID');

// GM용이라 소리가 깨짐
      add('/assets/mt32/midi/Ys/GM - 02 - Feena.MID');
      add('/assets/mt32/midi/Ys/GM - 03 - First Step Towards Wars.MID');
      add('/assets/mt32/midi/Ys/GM - 04 - Palace of Destruction.MID');
      add('/assets/mt32/midi/Ys/GM - 05 - The Last Moment of the Dark.MID');
      add('/assets/mt32/midi/Ys/GM - 06 - Ice Ridge of Noltia.MID');
      add('/assets/mt32/midi/Ys/GM - 07 - Subterranean Canal.MID');
      add('/assets/mt32/midi/Ys/GM - 08 - Compaline of Lane.MID');
      add('/assets/mt32/midi/Ys/GM - 09 - Don\'t Go Smoothly ~ Termination.MID');
      add('/assets/mt32/midi/Ys/GM - 10 - Presentiment.MID');
      add('/assets/mt32/midi/Ys/GM - 11 - Young Man With Wings.MID');
      add('/assets/mt32/midi/Ys/GM - 12 - Balestine Castle.MID');
      add('/assets/mt32/midi/Ys/GM - 13 - Drumbeat of Doom.MID');

update();
      next();
    }

function shortcut(e) {
      if (!e.altKey && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
        // space
        if (e.keyCode == 32) {
          play();
          e.preventDefault();
        }

// left
        if (e.keyCode == 37) {
          prev();
          e.preventDefault();
        }

// right
        if (e.keyCode == 39) {
          next();
          e.preventDefault();
        }

// right
        if (e.keyCode == 38) {
          volumeUp();
          e.preventDefault();
        }

// down
        if (e.keyCode == 40) {
          volumeDown();
          e.preventDefault();
        }
      }
    }

document.addEventListener('keydown', shortcut, false);

$(window).blur(function() {
      $('body').removeClass('active');
    });

$(window).focus(function() {
      $('body').addClass('active');
    });

return { clear: clear, add: add, play: play };
  })();

// feature detection for drag&drop upload
  var isAdvancedUpload = function() {
    var div = document.createElement('div');
    return(('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)) && 'FormData' in window && 'FileReader' in window;
  }();

// applying the effect for every form
  $('.dropbox').each(function() {
    var $form = $(this),
      counter = 0,
      $input = $form.find('input[type="file"]'),
      $label = $form.find('label'),
      droppedFiles = false,
      showFiles = function(files) {
        $label.text(files.length > 1 ? ($input.attr('data-multiple-caption') || '').replace('{count}', files.length) : files[0].name);
      };

// automatically submit the form on file select
    $input.on('change', function(e) {
      droppedFiles = e.target.files;
      showFiles(droppedFiles);
      $form.trigger('submit');
    });

// drag&drop files if the feature is available
    if (isAdvancedUpload) {
      $form.addClass('has-advanced-upload')
        .on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
          // preventing the unwanted behaviours
          e.preventDefault();
          e.stopPropagation();
        }).on('dragenter', function() {
          counter++;
          $form.addClass('is-dragover');
        }).on('dragleave dragend drop', function(e) {
          counter--;
          if (counter === 0) {
            $form.removeClass('is-dragover');
          }
        }).on('drop', function(e) {
          $form.removeClass('is-dragover');
          droppedFiles = e.originalEvent.dataTransfer.files;
          showFiles(droppedFiles);
          $form.trigger('submit');
        });
    }

// if the form was submitted
    $form.on('submit', function(e) {
      if (droppedFiles) {
        e.preventDefault();

// gathering the form data
        if (droppedFiles) {
          Playlist.clear();
          $.each(droppedFiles, function(i, file) {
            Playlist.add(file);
          });
          Playlist.play();
        }
      }
    });

// Firefox focus bug fix for file input
    $input.on('focus', function() {
      $input.addClass('has-focus');
    }).on('blur', function() {
      $input.removeClass('has-focus');
    });
  });

})(jQuery, window, document);

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>MT32Emu</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  </head>
  <body>
    <div id="player" class="audioplayer">
			<div class="btn prev disable" title="Previous"><a>Previous</a></div>
			<div class="btn playpause" title="Play"><a>Play</a></div>
			<div class="btn next disable" title="Next"><a>Next</a></div>

<div class="time current">00:00</div>
  		<div class="bar">
    		<div class="loaded"></div>
    		<div class="played"></div>
      </div>
      <div class="time duration">00:00</div>
      <div class="volume">
        <div class="button" title="Volume"><a>Volume</a></div>
        <div class="adjust"><div><div></div></div></div>
      </div>
      <div class="btn repeat disable" title="Repeat"><a>Repeat</a></div>
    </div>

<h3 id="message" title="play/puse/next">
          <div>Sequenced Music Player</div>
          <label for="file">
            <strong>Choose a midi file</strong><span class="dragndrop"> or drag it here</span>
            <div>or just click play to start demo music</div>
          </label>
        </h3>
        <input type="file" id="file" accept="audio/midi,audio/xmi,audio/midi-mt32,audio/midi-mt32-gm" class="file" data-multiple-caption="{count} files selected" multiple="">
        <button type="submit" class="button">Play</button>
      </div>
    </form>

* { margin: 0; padding: 0; }
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
html, body { height: 100%; }
body {
  color: #0f3c4b; overflow: hidden; background-color: #e5edf1; min-height: 240px;
  text-align: center; font-family: "Helvetica Neue", Helvetica, Arial;
}
body.active { background-color: #c8dadf; }

/* dropbox */
.dropbox { font-size: 1.25rem; position: relative; }

.dragndrop, .drop { display: none; }
.dropbox.is-dragover {
  outline: 2px dashed #92b0b3; outline-offset: -10px; background-color: rgba(200,218,223,0.5);
  transition: outline-offset .15s ease-in-out, background-color .15s linear;
}
.dropbox.is-dragover #message { display: none; }
.dropbox.is-dragover .drop { display: block; }
.dropbox.is-dragover .icon {
  width: 100%; height: 80px; fill: #92b0b3; margin-bottom: 20px; margin-top: 10%;
}
.dropbox.has-advanced-upload .dragndrop { display: inline; }
.input { margin-top: 10px; }
@keyframes appear-from-inside {
  from { transform: translateY(-50%) scale(0); }
  75% { transform: translateY(-50%) scale(1.1); }
  to { transform: translateY(-50%) scale(1); }
}
.file { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
.file + label {
  max-width: 80%; text-overflow: ellipsis; white-space: nowrap;
  cursor: pointer; display: inline-block; overflow: hidden;
}
.file + label:active strong,
.file:focus + label strong,
.file.has-focus + label strong { color: #39bfd3; }

.file:focus + label,
.file.has-focus + label { outline: 1px dotted #000; outline: -webkit-focus-ring-color auto 5px; }
.dropbox .button {
  font-weight: 700; color: #e5edf1; background-color: #39bfd3; display: none;
  padding: 8px 16px; margin: 40px auto 0;
}
.dropbox .button:active, .dropbox .button:focus { background-color: #0f3c4b; }

/* audioplayer */
.audioplayer {
  height: 40px; color: #fff; text-shadow: 1px 1px 0 #000;
  border: 1px solid #222; position: relative; z-index: 1; background: #333;
  background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222));
  background: -webkit-linear-gradient(top, #444, #222);
  background: -moz-linear-gradient(top, #444, #222);
  background: -ms-radial-gradient(top, #444, #222);
  background: -o-linear-gradient(top, #444, #222);
  background: linear-gradient(top, #444, #222);
}
.audioplayer > div { position: absolute; }
.audioplayer a { cursor: pointer;}
.btn {
  width: 39px; height: 100%; text-align: left;
  text-indent: -9999px; cursor: pointer; z-index: 2; top: 0;
  border-right: 1px solid #555; border-right-color: rgba(255, 255, 255, .1);
  border-left: 1px solid #111; border-left-color: rgba(0,0,0,.25);
}
.btn:active, .btn:focus { background-color: #222; }
.btn a { display: block; }

.prev.disable a:before, .prev.disable a:after { border-right-color: #aaa; }
.next.disable a:before, .next.disable a:after { border-left-color: #aaa; }

.prev { left: -1px; }
.next { left: 81px; }
.playpause { left: 40px; }

.repeat { right: 41px; }
.repeat.disable a, .repeat.disable a:before, .repeat.disable a:after {
  border-color: #aaa;
}
.repeat.one:after {
  content: '1'; display: block;
  position: absolute; bottom: 6px; right: 6px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #fff; color: #333; font-size: 10px;
  font-weight: bold; line-height: 11px; text-indent: 0;
  text-align: center; text-shadow: none;
}
.repeat a {
  position: relative; top: 50%; left: 50%; display: block;
  width: 16px; height: 16px; border: 2px solid;
  border-radius: 50%; border-color: #fff;
  border-right-color: transparent !important;
  border-left-color: transparent !important;
  margin: -10px 0 0 -10px;
}
.repeat a:after, .repeat a:before {
  content:''; border-color: #fff;
  position: absolute; width: 0; height: 0;
  border-width: 5px; border-style: solid;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
}
.repeat a:before {
  transform: rotate(-45deg);
  right: -6px;
  top: 0;
}
.repeat a:after {
  transform: rotate(135deg);
  left: -6px;
  bottom: 0;
}

.prev a:after, .prev a:before,
.next a:after, .next a:before {
  content:''; position: absolute; top: 50%; left: 50%;
  width: 0; height: 0; border: 0.5em solid transparent;
  transition: color .25s ease, background-color .25s ease, opacity .5s ease;
}
.prev a:after { border-left: none; border-right-color: #fff; margin: -0.5em 0 0 -0.1em; }
.prev a:before { border-left: none; border-right-color: #fff; margin: -0.5em 0 0 -0.5em; }
.next a:after { border-right: none; border-left-color: #fff; margin: -0.5em 0 0 0; }
.next a:before { border-right: none; border-left-color: #fff; margin: -0.5em 0 0 -0.4em; }

.audioplayer:not(.playing) .playpause a {
  width: 0; height: 0; border: 0.5em solid transparent; border-right: none; border-left-color: #fff;
  content:''; position: absolute; top: 50%; left: 50%; margin: -0.5em 0 0 -0.25em;
}
.playing .playpause a {
  width: 0.75em; height: 0.75em; position: absolute;
  top: 50%; left: 50%; margin: -0.375em 0 0 -0.375em;
}
.playing .playpause a:before, .playing .playpause a:after {
  width: 40%; height: 100%; background-color: #fff;
  content:''; position: absolute; top: 0;
}
.playing .playpause a:before { left: 0; }
.playing .playpause a:after { right: 0; }
.audioplayer.loading .playpause a { border-left-color: #aaa; }
.audioplayer.loading .playpause a:before,
.audioplayer.loading .playpause a:after { background-color: #aaa; }

.time { width: 60px; height: 100%; line-height: 2.375em; text-align: center; z-index: 2; top: 0; }
.current { border-left: 1px solid #111; border-left-color: rgba(0, 0, 0, .25); left: 122px; }
.duration { border-right: 1px solid #555; border-right-color: rgba(255, 255, 255, .1); right: 82px; }
.bar {
  height: 0.875em; background-color: #222; cursor: pointer;
  z-index: 1; top: 50%; right: 142px; left: 183px; margin-top: -0.438em;
}
.bar div { width: 0; height: 100%; position: absolute; left: 0; top: 0; }
.loaded { background-color: #333; z-index: 1; }
.played {
  background: #007fd1;
  background: -webkit-gradient(linear, left top, right top, from(#0f3c4b), to(#c8dadf));
  background: -webkit-linear-gradient(left, #0f3c4b, #c8dadf);
  background: -moz-linear-gradient(left, #0f3c4b, #c8dadf);
  background: -ms-radial-gradient(left, #0f3c4b, #c8dadf);
  background: -o-linear-gradient(left, #0f3c4b, #c8dadf);
  background: linear-gradient(left, #0f3c4b, #c8dadf);
  z-index: 2;
}
.volume {
  width: 40px; height: 100%; border-left: 1px solid #111; border-left-color: rgba(0, 0, 0, .25);
  text-align: left; text-indent: -9999px; cursor: pointer; z-index: 2; top: 0; right: 0;
}
.volume:hover, .volume:focus { background-color: #222; }
.audioplayer .button { width: 100%; height: 100%; }
.audioplayer .button a {
  width: 0.313em; height: 0.375em; background-color: #fff; display: block;
  position: relative; z-index: 1; top: 40%; left: 35%;
}
.audioplayer .button a:before, .audioplayer .button a:after { content:''; position: absolute; }
.audioplayer .button a:before {
  width: 0; height: 0; border: 0.5em solid transparent; border-left: none; border-right-color: #fff;
  z-index: 2; top: 50%; right: -0.25em; margin-top: -0.5em;
}
.audioplayer:not(.mute) .button a:after {
  width: 0.313em; height: 0.313em; border: 0.25em double #fff; border-width: 0.25em 0.25em 0 0;
  border-radius: 0 0.938em 0 0; left: 0.563em; top: -0.063em; transform: rotate(45deg);
}
.adjust {
  width: 42px; height: 120px; cursor: default; position: absolute;
  right: -1px; top: -9999px; background: #222;
  background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222));
  background: -webkit-linear-gradient(top, #444, #222);
  background: -moz-linear-gradient(top, #444, #222);
  background: -ms-radial-gradient(top, #444, #222);
  background: -o-linear-gradient(top, #444, #222);
  background: linear-gradient(top, #444, #222);
  border-top-left-radius: 2px; border-top-right-radius: 2px;
}
.volume:not(:hover) .adjust { opacity: 0; }
.volume:hover .adjust { top: auto; bottom: 100%; }
.adjust > div {
  width: 40%; height: 100px; background-color: #222;
  cursor: pointer; position: relative; z-index: 1; margin: 30% auto 0;
}
.adjust div div {
  width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; background: #007fd1;
  background: -webkit-gradient(linear, left bottom, left top, from(#007fd1), to(#c600ff));
  background: -webkit-linear-gradient(bottom, #007fd1, #c600ff);
  background: -moz-linear-gradient(bottom, #007fd1, #c600ff);
  background: -ms-radial-gradient(bottom, #007fd1, #c600ff);
  background: -o-linear-gradient(bottom, #007fd1, #c600ff);
  background: linear-gradient(bottom, #007fd1, #c600ff);
}
.play, .pause, .volume a {
  -webkit-filter: drop-shadow(1px 1px 0 #000);
  -moz-filter: drop-shadow(1px 1px 0 #000);
  -ms-filter: drop-shadow(1px 1px 0 #000);
  -o-filter: drop-shadow(1px 1px 0 #000);
  filter: drop-shadow(1px 1px 0 #000);
}
.bar, .bar div, .adjust div { border-radius: 4px; }
.bar, .adjust > div {
  box-shadow: -1px -1px 0 rgba(0, 0, 0, .5), 1px 1px 0 rgba(255, 255, 255, .1);
}
.adjust div div, .played { box-shadow: inset 0 0 5px rgba(255, 255, 255, .5); }
.adjust { box-shadow: -2px -2px 2px rgba(0, 0, 0, .15), 2px -2px 2px rgba(0, 0, 0, .15); }
.audioplayer *, .audioplayer *:before, .audioplayer *:after {
  transition: color .25s ease, background-color .25s ease, opacity .5s ease;
}

#visualizer, #dropper { width: 100%; height: calc(100% - 42px); }
#visualizer { display: block; }
#dropper { position: absolute; top: 0; left: 0; }

#message {
  position: absolute; top: 50%; left: 0; font-size: 21px;
  margin-top: -36px; width: 100%; text-shadow: 1px 1px rgba(255, 255, 255, 0.8);
}
#message label {
  font-size: 16px; font-weight: normal;
}
#message.err { color: #c10000; }
#player { position: absolute; bottom: 0; left: 0; right: 0; }
.version { position: absolute; top: 10px; right: 10px; color: #95b4c3; font-size: 11px; }

@media screen and (max-width: 360px) {
  .duration { display: none;  }
  .bar { right: 92px; }
}

Pop out