Autoplay

How it works

Press the button to play!

JZZ.input.Kbd piano, like all other JZZ nodes, exposes both MIDI-In and MIDI-Out interfaces, and can be connected either way.

Page source

<!DOCTYPE html>
<html>
<head>
<title>Autoplay</title>
<script src="JZZ.js"></script>
<script src="JZZ.synth.Tiny.js"></script>
<script src="JZZ.input.Kbd.js"></script>
</head>

<body>
<h1>Autoplay</h1>

<div id=piano></div>
<button onclick='play();'>Play!</button>

<script><!--
JZZ.synth.Tiny.register('Web Audio');
var piano = JZZ.input.Kbd({ at:'piano', active:false }).connect(JZZ().openMidiOut());

function play() {
  piano.noteOn(0, 'C5', 120).wait(300).noteOff(0, 'C5')
       .noteOn(0, 'E5', 100).wait(300).noteOff(0, 'E5')
       .noteOn(0, 'G5', 100).wait(300).noteOff(0, 'G5')
       .noteOn(0, 'C6', 120).wait(300).noteOff(0, 'C6')
       .noteOn(0, 'G5', 100).wait(300).noteOff(0, 'G5')
       .noteOn(0, 'E5', 100).wait(300).noteOff(0, 'E5')
       .noteOn(0, 'C5', 120).wait(500).noteOff(0, 'C5');
}
--></script>

</body>
</html>

Autoplay

How it works

Page source

See also