Additional modules for JZZ.js
JavaScript HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
html
javascript
minified
.gitattributes
.gitignore
Gruntfile.js
README.md
package.json

README.md

JZZ-modules

Additional modules for JZZ.js:

JZZ.synth.MIDIjs
JZZ.synth.Timbre
JZZ.synth.OSC
JZZ.input.Qwerty
JZZ.input.Kbd
JZZ.input.ASCII
JZZ.input.Knobs

JZZ.synth.MIDIjs

Create a custom MIDI-Out port using MIDI.js library.

windows mocos linux android

Example
<script src='javascript/JZZ.js'></script>
<script src='javascript/MIDI.js'></script>
<script src='javascript/JZZ.synth.MIDIjs.js'></script>
<script><!--
JZZ.synth.MIDIjs({ soundfontUrl: "./soundfont/", instrument: "acoustic_grand_piano" })
   .note(0, 'C5', 127, 500).wait(500)
   .note(0, 'E5', 127, 500).wait(500)
   .note(0, 'G5', 127, 500).wait(500)
   .note(0, 'C6', 127, 500);
--></script>

See the demo.

JZZ.synth.Timbre

A wrapper for the Timbre.js T("PluckGen")/T("OscGen")/T("SynthDef") synths.

windows mocos linux android

(Unlike advertized, does not seem to work in IE9 and some other browsers)

Example
<script src='javascript/timbre.js'></script>
<script src='javascript/JZZ.js'></script>
<script src='javascript/JZZ.synth.MIDIjs.js'></script>
<script><!--
var synth = T("SynthDef").play();
synth.def = function(opts) {
  var osc1, osc2, env;
  osc1 = T("sin", {freq:opts.freq, mul:0.25});
  osc2 = T("sin", {freq:opts.freq + 8, mul:0.25});
  env  = T("linen", {s:450, r:2500, lv:0.5}, osc1, osc2);
  return env.on("ended", opts.doneAction).bang();
};
JZZ.synth.Timbre(synth)
   .note(0, 'C5', 127, 500).wait(500)
   .note(0, 'E5', 127, 500).wait(500)
   .note(0, 'G5', 127, 500).wait(500)
   .note(0, 'C6', 127, 500);
--></script>

See the demo.

JZZ.synth.OSC

Create a custom MIDI-Out port implemented via Web Audio AudioContext.oscillator.

windows mocos linux ios android

Example
<script src='javascript/JZZ.js'></script>
<script src='javascript/JZZ.synth.OSC.js'></script>
<script><!--
JZZ.synth.OSC()
   .note(0, 'C5', 127, 500).wait(500)
   .note(0, 'E5', 127, 500).wait(500)
   .note(0, 'G5', 127, 500).wait(500)
   .note(0, 'C6', 127, 500);
--></script>

See the demo.

JZZ.input.Qwerty

A wrapper for the Qwerty-Hancock keyboard.

windows mocos linux

Works wherewer the mouse and keyboard inputs are available.

qwerty

Example
<script src='javascript/JZZ.js'></script>
<script src='javascript/qwerty-hancock.js'></script>
<script src='javascript/JZZ.input.Qwerty'></script>
...
<div id='qwerty'> here comes the piano! </div>
...
<script><!--
JZZ.input.Qwerty({id:'qwerty', width:281, height:150, octaves:1, startNote:'C4'})
   .connect(JZZ().openMidiOut());
--></script>

See the demo.

JZZ.input.Kbd

Universal HTML keyboard for your MIDI projects.

windows mocos linux ios android

Mouse and multitouch support. Custom styles. Ready for responsive design.

kbd

Example
<script src='javascript/JZZ.js'></script>
<script src='javascript/JZZ.input.Kbd'></script>
...
<script><!--
JZZ.input.Kbd().connect(JZZ().openMidiOut());
--></script>

See the demo.

JZZ.input.ASCII

ASCII keyboard as MIDI input.

windows mocos linux

Can be connected to JZZ.input.Kbd to enable both keyboard and mouse/touch input.

Example
<script src='javascript/JZZ.js'></script>
<script src='javascript/JZZ.input.ASCII'></script>
...
<script><!--
JZZ.input.ASCII({
     //  S D   G H J
     // Z X C V B N M
     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'
   }).connect(JZZ().openMidiOut());
--></script>

See the demo.

JZZ.input.Knobs

Pitch-bend, modulation, and other knobs for your virtual instrument.

windows mocos linux ios android

Mouse and multitouch. Custom styles. Responsive design friendly. Perfect to use together with JZZ.input.Kbd...

knobs

Example
<script src='javascript/JZZ.js'></script>
<script src='javascript/JZZ.input.Knobs'></script>
...
<script><!--
JZZ.input.Slider({data:'pitch'}).connect(JZZ().openMidiOut());
JZZ.input.Pad({dataX:'mod', dataY:'volume'}).connect(JZZ().openMidiOut());
--></script>

See the demo.

More modules are coming soon...

How to create your own modules for JZZ.js