html5 Drum-Loops player that uses MIDI.js

Avg Bid (USD)
Project Budget (USD)
$250 - $750

Project Description:
(see the "links" section below for video)

we need a html5 slide show that shows bars of drums notation (one bar per page) and plays the matching MIDI loop for each bar.
it should have a play/stop button, a slider to change the tempo in which the loop is being played and a metronome on/off function.
you need to use midi.js (see link below) to create a midi looper that plays two midi channels: drums and click.
we will provide the notation jpegs, midi files, and a soundfont (sf2 file) of the drums and metronome sound samples.
it should have a cool and minimal look and feel when switching pages - a sliding effect maybe, or a page-turning animation.
there should also be an intro page and a notation legend page.
finally, the html5 page should be wrapped into ios and android apps. (see below for mobile wrappers)

the app should be ready by 1/12/2013.

check out the following video for reference - in the first 23 seconds you'll see exactly what we need.

you can get midi.js here:

Skills required:
HTML5, Javascript, PHP, Software Architecture
About the employer:
Public Clarification Board
Bids are hidden by the project creator. Log in as the employer to view bids or to bid on this project.
You will not be able to bid on this project if you are not qualified in one of the job categories. To see your qualifications click here.

$ 515
in 10 days
$ 750
in 10 days
$ 722
in 12 days
$ 750
in 15 days
$ 833
in 3 days