Edit in JSFiddle

// 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')
.note('eighth','A2');
righthand.note('eighth','Db4,Bb4')
.note('sixteenth','A3,F4')
.note('sixteenth','A3,F4')
.note('eighth','A3,F4')
.note('sixteenth','A3,F4')
.note('sixteenth','A3,F4')
.note('eighth','A3,F4')
.note('sixteenth','A3,F4')
.note('sixteenth','A3,F4')
.note('eighth','A3,F4')
.note('eighth','A3,F4');
// bar 5
lefthand.note('quarter','Bb2')
.note('tripletEighth','Bb2')
.note('tripletEighth','Bb2')
.note('tripletEighth','Ab2')
.note('quarter','Bb2')
.note('quarter','Bb2');
righthand.note('quarter','D4,Bb4')
.note('tripletEighth','D4,F4')
.note('tripletEighth','D4')
.note('tripletEighth','C4')
.note('tripletEighth','D4', true)
.note('tripletSixteenth','D4')
.note('tripletEighth','D4,Bb4')
.rest('tripletSixteenth')
.note('sixteenth','D4,Bb4')
.note('sixteenth','Eb4,C5')
.note('sixteenth','F4,D5')
.note('sixteenth','G4,Eb5');
// bar 6
lefthand.note('quarter','G#2')
.note('tripletEighth','G#2')
.note('tripletEighth','G#2')
.note('tripletEighth','F#2')
.note('quarter','G#2')
.note('quarter','G#2');
righthand.note('eighth','Ab4,F5')
.note('eighth','Bb4')
.note('sixteenth','Bb4')
.note('sixteenth','C5')
.note('sixteenth','D5')
.note('sixteenth','Eb5')
.note('eighth','F5')
.note('eighth','F5')
.note('tripletEighth','Ab4,F5')
.note('tripletEighth','Bb4,Gb5')
.note('tripletEighth','C5,Ab5');
// bar 7
lefthand.note('quarter','F#2')
.note('tripletEighth','F#2')
.note('tripletEighth','F#2')
.note('tripletEighth','E2')
.note('quarter','F#2')
.note('quarter','F#2');
righthand.note('eighth','Db5,Bb5')
.note('eighth','Gb4')
.note('sixteenth','Gb4')
.note('sixteenth','Ab4')
.note('sixteenth','Bb4')
.note('sixteenth','C5')
.note('eighth','C#5')
.note('sixteenth','Bb5')
.note('sixteenth','Db5')
.note('tripletEighth','Db5,Bb5')
.note('tripletEighth','C4,Ab5')
.note('tripletEighth','Bb4,Gb5');
// bar 8
lefthand.note('quarter','C#3')
.note('tripletEighth','C#3')
.note('tripletEighth','C#3')
.note('tripletEighth','B2')
.note('quarter','C#3')
.note('quarter','C#3');
righthand.note('tripletQuarter','Db5,Ab5')
.note('tripletEighth','Ab4,Gb5')
.note('tripletEighth','Ab4,F5')
.note('tripletEighth','Ab4')
.note('tripletEighth','Gb4')
.note('tripletQuarter','Ab4')
.note('tripletEighth','Ab4')
.note('tripletEighth','Ab4,F5')
.note('tripletEighth','Ab4')
.note('tripletEighth','Ab4');
// bar 9
lefthand.note('quarter','B2')
.note('tripletEighth','B2')
.note('tripletEighth','B2')
.note('tripletEighth','A#2')
.note('quarter','B2')
.note('tripletEighth','B2')
.note('tripletEighth','B2')
.note('tripletEighth','B2');
righthand.note('eighth','Gb4,Eb5')
.note('sixteenth','Gb4,Eb5')
.note('sixteenth','F4,F5')
.note('eighth','Gb4,Gb5')
.note('sixteenth','Gb4')
.note('sixteenth','Ab4')
.note('quarter','Bb4')
.note('eighth','Ab4,F5')
.note('eighth','Gb4,Eb5');
// bar 10
lefthand.note('quarter','Bb2')
.note('tripletEighth','Bb2')
.note('tripletEighth','Bb2')
.note('tripletEighth','Ab2')
.note('quarter','Bb2')
.note('tripletEighth','Bb2')
.note('tripletEighth','Bb2')
.note('tripletEighth','Bb2');
righthand.note('eighth','F4,Db5')
.note('sixteenth','F4,Db5')
.note('sixteenth','Eb4,Eb5')
.note('eighth','F4,F5')
.note('sixteenth','F4')
.note('sixteenth','Gb4')
.note('quarter','Ab4')
.note('eighth','Gb4,Eb5')
.note('eighth','F4,Db5');
// bar 11
lefthand.note('quarter','C3')
.note('tripletEighth','C3')
.note('tripletEighth','C3')
.note('tripletEighth','C3')
.note('quarter','C3')
.note('tripletEighth','C3')
.note('tripletEighth','C3')
.note('tripletEighth','C3');
righthand.note('eighth','E4,C5')
.note('sixteenth','C5')
.note('sixteenth','D5')
.note('eighth','E4,E5')
.note('sixteenth','E4')
.note('sixteenth','F4')
.note('eighth','G4')
.note('sixteenth','G4')
.note('sixteenth','A4')
.note('eighth','Bb4,G5')
.note('eighth','C5');
// bar 12
lefthand.note('quarter','F2')
.note('tripletEighth','F2')
.note('tripletEighth','F2')
.note('tripletEighth','F2')
.note('quarter','F2')
.note('eighth','G2')
.note('eighth','A2');
righthand.note('eighth','A4,F5')
.note('sixteenth','A3,F4')
.note('sixteenth','A3,F4')
.note('eighth','A3,F4')
.note('sixteenth','A3,F4')
.note('sixteenth','A3,F4')
.note('eighth','A3,F4')
.note('sixteenth','A3,F4')
.note('sixteenth','A3,F4')
.note('eighth','A3,F4')
.note('eighth','A3,F4');
// bar 13
lefthand.note('quarter','Bb2')
.note('tripletEighth','Bb2')
.note('tripletEighth','Bb2')
.note('tripletEighth','Ab2')
.note('quarter','Bb2')
.note('quarter','Bb2');
righthand.note('quarter','D4,Bb4')
.note('tripletEighth','D4,F4')
.note('tripletEighth','D4')
.note('tripletEighth','C4')
.note('tripletEighth','D4', true)
.note('tripletSixteenth','D4')
.note('tripletEighth','D4,Bb4')
.rest('tripletSixteenth')
.note('sixteenth','D4,Bb4')
.note('sixteenth','Eb4,C5')
.note('sixteenth','F4,D5')
.note('sixteenth','G4,Eb5');
// bar 14
lefthand.note('quarter','G#2')
.note('tripletEighth','G#2')
.note('tripletEighth','G#2')
.note('tripletEighth','F#2')
.note('quarter','G#2')
.note('quarter','G#2');
righthand.note('eighth','Ab4,F5')
.note('eighth','Bb4')
.note('sixteenth','Bb4')
.note('sixteenth','C5')
.note('sixteenth','D5')
.note('sixteenth','Eb5')
.note('eighth','F5')
.note('eighth','F5')
.note('tripletEighth','Ab4,F5')
.note('tripletEighth','Bb4,Gb5')
.note('tripletEighth','C5,Ab5');
// bar 15
lefthand.note('quarter','F#2')
.note('tripletEighth','F#2')
.note('tripletEighth','F#2')
.note('tripletEighth','E2')
.note('quarter','F#2')
.note('quarter','F#2');
righthand.note('dottedHalf','C#5,Bb5')
.note('quarter','E5,C#6');
// bar 16
lefthand.note('quarter','F2')
.note('tripletEighth','F2')
.note('tripletEighth','F2')
.note('tripletEighth','Eb2')
.note('quarter','F2')
.note('quarter','F2');
righthand.note('quarter','Eb5,C6')
.note('half','C5,A5')
.note('quarter','A4,F5');
// bar 17
lefthand.note('tripletEighth','E2')
.note('tripletEighth','A#2')
.note('tripletEighth','C#3')
.note('tripletEighth','E3')
.note('tripletEighth','A#3')
.note('tripletEighth','C#4')
.note('half','E4');
righthand.note('dottedHalf','B4,F#5')
.note('quarter','C#5,A#5');
// bar 18
lefthand.note('quarter','F4')
.note('tripletEighth','F2')
.note('tripletEighth','F2')
.note('tripletEighth','F2')
.note('half','F2');
righthand.note('quarter','C5,A5')
.note('half','A4,F5')
.note('quarter','A4,F5');
// bar 19
lefthand.note('tripletEighth','E2')
.note('tripletEighth','A#2')
.note('tripletEighth','C#3')
.note('tripletEighth','E3')
.note('tripletEighth','A#3')
.note('tripletEighth','C#4')
.note('half','E4');
righthand.note('dottedHalf','B4,F#5')
.note('quarter','C#5,A#5');
// bar 20
lefthand.note('quarter','F4')
.note('tripletEighth','F2')
.note('tripletEighth','F2')
.note('tripletEighth','F2')
.note('half','F2');
righthand.note('quarter','C5,A5')
.note('half','A4,F5')
.note('quarter','A4,D5');
// bar 21
lefthand.note('quarter','B2')
.note('tripletEighth','B2')
.note('tripletEighth','B2')
.note('tripletEighth','A#2')
.note('quarter','B2')
.note('tripletEighth','B2')
.note('tripletEighth','B2')
.note('tripletEighth','B2');
righthand.note('dottedHalf','F#4,Eb5')
.note('quarter','B4,F#5');
// bar 22
lefthand.note('quarter','Bb2')
.note('tripletEighth','Bb2')
.note('tripletEighth','Bb2')
.note('tripletEighth','Ab2')
.note('quarter','Bb2')
.note('tripletEighth','Bb2')
.note('tripletEighth','Bb2')
.note('tripletEighth','Bb2');
righthand.note('quarter','Bb4,F5')
.note('half','F4,Db5')
.note('quarter','Db4,Bb4');
// bar 23
lefthand.note('quarter','C2')
.note('tripletEighth','C2')
.note('tripletEighth','C2')
.note('tripletEighth','C2')
.note('quarter','C2')
.note('tripletEighth','C2')
.note('tripletEighth','C2')
.note('tripletEighth','C2');
righthand.note('eighth','E4,C5')
.note('sixteenth','C5')
.note('sixteenth','D5')
.note('eighth','E4,E5')
.note('sixteenth','E4')
.note('sixteenth','F4')
.note('eighth','G4')
.note('sixteenth','G4')
.note('sixteenth','A4')
.note('eighth','Bb4,G5')
.note('eighth','C5');
// step 24
lefthand.note('quarter','F2')
.note('tripletEighth','F2')
.note('tripletEighth','F2')
.note('tripletEighth','F2')
.note('quarter','F2')
.note('eighth','G2')
.note('eighth','A2');
righthand.note('eighth','A4,F5')
.note('sixteenth','A3,F4')
.note('sixteenth','A3,F4')
.note('eighth','A3,F4')
.note('sixteenth','A3,F4')
.note('sixteenth','A3,F4')
.note('eighth','A3,F4')
.note('sixteenth','A3,F4')
.note('sixteenth','A3,F4')
.note('eighth','A3,F4')
.note('eighth','A3,F4');
lefthand.finish();
righthand.finish();
music.end();
music.onFinished(function() {
    playing = false;
    enablePlay();
});
function enablePlay() {
    playButton.disabled = false;
    pauseButton.disabled = true;
    stopButton.disabled = true;
}
function playZelda() {
    playButton.disabled = true;
    pauseButton.disabled = false;
    stopButton.disabled = false;
    music.play();
    playing = true;
}
function pauseZelda() {
    if (playing) {
        music.pause();
        playing = false;
    }
    else {
        music.play();
        playing = true;
    }
}
function stopZelda() {
    music.stop();
    playing = false;
    enablePlay();
}
var playButton = document.getElementById("playButton"),
    pauseButton = document.getElementById("pauseButton"),
    stopButton = document.getElementById("stopButton"),
    playing = false;
playButton.onclick = playZelda;
pauseButton.onclick = pauseZelda;
stopButton.onclick = stopZelda;

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

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;
}