jazz-soft / jzz-modules

Additional modules for JZZ.js

JZZ-modules

Additional modules for JZZ.js:

JZZ.synth.MIDIjs
JZZ.synth.Timbre
JZZ.synth.OSC - moved to https://github.com/jazz-soft/JZZ-synth-OSC
JZZ.synth.Tiny - see at https://github.com/jazz-soft/JZZ-synth-Tiny
JZZ.input.Qwerty
JZZ.input.Kbd - moved to https://github.com/jazz-soft/JZZ-input-Kbd
JZZ.input.ASCII - moved to https://github.com/jazz-soft/JZZ-input-Kbd
JZZ.input.Knobs - moved to https://github.com/jazz-soft/JZZ-input-Kbd

JZZ.synth.MIDIjs

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

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.

(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

A simple Web Audio oscillator-based MIDI-Out port.

(moved to https://github.com/jazz-soft/JZZ-synth-OSC)

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.synth.Tiny

Tiny Web-Audio GM Synthesizer (g200kg/webaudio-tinysynth) wrapped as MIDI-Out port.

(see at https://github.com/jazz-soft/JZZ-synth-Tiny)

Example

<script src='javascript/JZZ.js'></script>
<script src='javascript/JZZ.synth.Tiny.js'></script>
<script><!--
JZZ.synth.Tiny()
   .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.

Works wherewer the mouse and keyboard inputs are available.

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.

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

(moved to https://github.com/jazz-soft/JZZ-input-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.

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

(moved to https://github.com/jazz-soft/JZZ-input-Kbd)

Example

<script src='javascript/JZZ.js'></script>
<script src='javascript/JZZ.input.Kbd'></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.

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

(moved to https://github.com/jazz-soft/JZZ-input-Kbd)

Example

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

See the demo.

How to create your own modules for JZZ.js

jzz-modules's Issues

Loading .sf2 soundfonts

Is it possible to do that?

How to change instrument with OSC

Hi,
My name is Jack,
It seems like the activation email of the community doesn't manage to be received by my email, so I am sorry to post my problem here.
Since I don't have any midi output device, I use JZZ.synth.OSC according to the "Hello MIDI" tutorial. It works well. However, when I tried to change the instrument(send(0xC0, 36)), the sound remain the same. Can anyone tell me how to change the instrument? THX!

here is the code:

<!DOCTYPE html>
<html>
<head>
<title>Hello MIDI!</title>
<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true"/>
<script src="javascripts/JZZ.js"></script>
<script src="javascript/JZZ.synth.OSC.js"></script>
</head>
<body>
<h1>Hello MIDI!</h1>
<script><!--
JZZ.synth.OSC.register('Synth');
var port = JZZ().openMidiOut().or(function(){alert('Cannot open MIDI port!');});
function play(){
  port.send([0xC0, 36]).wait(500).send([0x90,65,127]).wait(500).send([0x80, 65, 0]);
}
--></script>
<button onclick='play();'> Press to play... </button>
</body>
</html>