Jazz-Soft.net
We make it sound!
*** MIDI.js is loading soundfont... ***
This is a wrapper for MIDI.js library by Michael Deal.
Use the mouse or touch screen and/or keyboard to play the synth.
<!DOCTYPE html>
<html>
<head>
<title>JZZ.synth.MIDIjs</title>
<style type="text/css">
.inner {position:absolute; bottom:0; left:0; width:100%; text-align:center;}
</style>
<script src="JZZ.js"></script>
<script src="MIDI.js"></script>
<script src="JZZ.synth.MIDIjs.js"></script>
<script src="JZZ.input.Kbd.js"></script>
</head>
<body>
<h1>JZZ.synth.MIDIjs</h1>
<div id=piano></div>
<div id=loading>*** MIDI.js is loading soundfont... ***</div>
<script><!--
function loaded() { document.getElementById('loading').innerHTML = ''; }
var synth = JZZ.synth.MIDIjs({ soundfontUrl: "./soundfont/", instrument: "acoustic_grand_piano" })
.or(function(){ loaded(); alert('Cannot load MIDI.js!\n' + this.err()); })
.and(function(){ loaded(); });
var piano = JZZ.input.Kbd({at:'piano', from:'C5', to:'B5', onCreate:function() {
this.getBlackKeys().setStyle({color:'#fff'});
this.getKey('C5').setInnerHTML('<span class=inner>Z</span>');
this.getKey('C#5').setInnerHTML('<span class=inner>S</span>');
this.getKey('D5').setInnerHTML('<span class=inner>X</span>');
this.getKey('D#5').setInnerHTML('<span class=inner>D</span>');
this.getKey('E5').setInnerHTML('<span class=inner>C</span>');
this.getKey('F5').setInnerHTML('<span class=inner>V</span>');
this.getKey('F#5').setInnerHTML('<span class=inner>G</span>');
this.getKey('G5').setInnerHTML('<span class=inner>B</span>');
this.getKey('G#5').setInnerHTML('<span class=inner>H</span>');
this.getKey('A5').setInnerHTML('<span class=inner>N</span>');
this.getKey('A#5').setInnerHTML('<span class=inner>J</span>');
this.getKey('B5').setInnerHTML('<span class=inner>M</span>');
}});
var ascii = JZZ.input.ASCII({
Z:'C5', S:'C#5', X:'D5', D:'D#5', C:'E5', V:'F5',
G:'F#5', B:'G5', H:'Ab5', N:'A5', J:'Bb5', M:'B5'
});
ascii.connect(piano);
piano.connect(synth);
--></script>
</body>
</html>