View
Theme
Font Style
7pt
8pt
9pt
10pt
11pt
Line Style
100%
110%
120%
130%
140%
Bold Keyword
Default
Inspector
Kkaefer
Eclipse
SQ Light
Lesser
Dark
Cobalt
Monokai
Rubyblue
Night
SQ Dark
Ambiance
Blackboard
Line Num.
Wrap Lines
Preview
Redraw
JS Tab
HTML Tab
CSS Tab
Live Tab
Prev. Tab
Next Tab
Browser
History…
Help
Edit
Settings
Auto Complete
Match Brackets
Match Highlight
Strip Whitespace
Auto Close Brackets
Auto Close Quotes
Show Print Margin
Undo
Redo
Delete
Select Line
Select All
Find & Replace
Find
Find in Repo.
Find Next
Find Previous
Replace Single
Replace All
Wrap Search
Revert
As Template
Diff Revision
Format
Compress
Text
Zen Coding
Indent
Tab Width
1
2
3
4
5
6
7
8
Indent Unit
1
2
3
4
5
6
7
8
Smart Indent
Use Tabs
Visible Tabs
Shift Left
Shift Right
Put Indent
Number
Increment by 1
Decrement by 1
Increment by 0.1
Decrement by 0.1
Increment by 10
Decrement by 10
Simple Math
Comment
Line
Move Up
Move Down
Copy Up
Copy Down
Go to Line…
Remove Line
Next Point
Prev. Point
Help
Share
Login
You can jump to the latest bin by adding
/latest
to your URL
×
z
Find
→
←
⟲
Replace
⊗
All
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);
MT32Emu
Previous
Play
Next
00:00
00:00
Volume
Repeat
Drop it here
Sequenced Music Player
Choose a midi file
or drag it here
or just click play to start demo music
Play
* { 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
Help
About
×
×