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