Jazz-Soft.net
We make it sound!
Home » Examples » JZZ.synth.MIDIjs

JZZ.synth.MIDIjs

 *** MIDI.js is loading soundfont... ***

How it works

This is a wrapper for MIDI.js library by Michael Deal.

Use the mouse or touch screen and/or keyboard to play the synth.

Page source

<!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>

See also