Zelda - Band.js

The Zelda Overworld theme recreated with Band.js

by tealm

HTML

<script src="http://remotesynthesis.com/projects/8bit/js/band.min.js"></script>
<button id="playButton">Play</button>
<button id="pauseButton" disabled>Pause</button>
<button id="stopButton" disabled>Stop</button>
<p>Image via <a href="http://8bitcity.blogspot.com/2011/12/awesome-8-bit-zelda-pic.html">http://8bitcity.blogspot.com/2011/12/awesome-8-bit-zelda-pic.html</a></p>

CSS

body {
  background-image: url(http://remotesynthesis.com/projects/8bit/img/The_Legend_of_Zelda_8_Bit_by_gamingaddictmike125.png);
  color: white;
  font-size: .8em;
}

a,
a:visited,
a:hover {
  color: white;
}

JavaScript

// band.js https://github.com/meenie/band.js
// arrangement via http://herbalcell.com/static/sheets/legend-of-zelda/overworld-labels.pdf
var music = new BandJS();
music.setTimeSignature(4, 4);
music.setTempo(116);
var lefthand = music.createInstrument('square'),
  righthand = music.createInstrument('square');

// bar 1
lefthand.note('quarter', 'Bb2')
  .note('tripletEighth', 'Bb2')
  .note('tripletEighth', 'Bb2')
  .note('tripletEighth', 'Bb2')
  .note('quarter', 'Bb2')
  .note('tripletEighth', 'Bb2')
  .note('tripletEighth', 'Bb2')
  .note('tripletEighth', 'Bb2');

righthand.note('half', 'D4,Bb4', true)
  .note('dottedEighth', 'D4,Bb4')
  .note('sixteenth', 'D4,Bb4')
  .note('tripletEighth', 'D4,Bb4')
  .note('tripletEighth', 'D4,Bb4')
  .note('tripletEighth', 'D4,Bb4');

// bar 2
lefthand.note('quarter', 'G#2')
  .note('tripletEighth', 'G#2')
  .note('tripletEighth', 'G#2')
  .note('tripletEighth', 'G#2')
  .note('quarter', 'G#2')
  .note('tripletEighth', 'G#2')
  .note('tripletEighth', 'G#2')
  .note('tripletEighth', 'G#2');

righthand.note('tripletQuarter', 'C4,Bb4')
  .note('tripletEighth', 'C4,Ab4')
  .note('quarter', 'C4,Bb4', true)
  .note('dottedEighth', 'C4,Bb4')
  .note('sixteenth', 'Bb4')
  .note('tripletEighth', 'C4,Bb4')
  .note('tripletEighth', 'C4,Bb4')
  .note('tripletEighth', 'C4,Bb4');

// bar 3
lefthand.note('quarter', 'F#2')
  .note('tripletEighth', 'F#2')
  .note('tripletEighth', 'F#2')
  .note('tripletEighth', 'F#2')
  .note('quarter', 'F#2')
  .note('tripletEighth', 'F#2')
  .note('tripletEighth', 'F#2')
  .note('tripletEighth', 'F#2');

righthand.note('tripletQuarter', 'Db4,Bb4')
  .note('tripletEighth', 'Db4,Ab4')
  .note('quarter', 'D4,Bb4', true)
  .note('dottedEighth', 'D4,Bb4')
  .note('sixteenth', 'Bb4')
  .note('tripletEighth', 'Db4,Bb4')
  .note('tripletEighth', 'Db4,Bb4')
  .note('tripletEighth', 'Db4,Bb4');

// bar 4
lefthand.note('quarter', 'F2')
  .note('quarter', 'F2')
  .note('quarter', 'F2')
  .note('eighth', 'G2')
 ...