Responsive Design

How it works

Resize the window to see the piano changing its shape to fit the page.

Page source

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

<body>
<h1>Responsive Piano</h1>

<div id=piano></div>

<script><!--
JZZ.synth.Tiny.register();

JZZ.input.Kbd({
  at: 'piano',
  from: 'C4',
  to: 'B4',
  0:   { pos: 'W' },
  320: { },
  450: { to: 'E5' },
  610: { to: 'B5' },
  900: { to: 'B6' },
  onCreate: function() {
    this.getKeys().setStyle({ borderColor:'#00f' });
    this.getBlackKeys().setStyle({ backgroundColor:'#c0c' }, {});
    this.getWhiteKeys().setStyle({ backgroundColor:'#fef' }, {});
  }
}).connect(JZZ().openMidiOut());
--></script>

</body>
</html>

Responsive Design

How it works

Page source

See also