codegirl007
/
piano
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

- hooking up piano sounds

master
Stephanie Chung 12 years ago
parent
47bb58583d
commit
fae1dea4ab
2 changed files with 86 additions and 71 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 113
      index.html
  2. 40
      js/main.js

113
index.html
Unescape View File

@ -6,61 +6,68 @@
<body> <body>
<div id="p-wrapper"> <div id="p-wrapper">
<ul id="piano"> <ul id="piano">
<li><div class="anchor"></div>A</li> <li><div class="anchor" data-note="21"></div>A</li>
<li><div class="anchor"></div><span></span>B</li> <li><div class="anchor" data-note="23"></div><span class="black_key" data-note="22"></span>B</li>
<li><div class="anchor"></div>C</li> <li><div class="anchor" data-note="24"></div>C</li>
<li><div class="anchor"></div><span></span>D</li> <li><div class="anchor" data-note="26"></div><span class="black_key" data-note="25"></span>D</li>
<li><div class="anchor"></div><span></span>E</li> <li><div class="anchor" data-note="28"></div><span class="black_key" data-note="27"></span>E</li>
<li><div class="anchor"></div>F</li> <li><div class="anchor" data-note="29"></div>F</li>
<li><div class="anchor"></div><span></span>G</li> <li><div class="anchor" data-note="31"></div><span class="black_key" data-note="30"></span>G</li>
<li><div class="anchor"></div><span></span>A</li> <li><div class="anchor" data-note="33"></div><span class="black_key" data-note="32"></span>A</li>
<li><div class="anchor"></div><span></span>B</li> <li><div class="anchor" data-note="35"></div><span class="black_key" data-note="34"></span>B</li>
<li><div class="anchor"></div>C</li> <li><div class="anchor" data-note="36"></div>C</li>
<li><div class="anchor"></div><span></span>D</li> <li><div class="anchor" data-note="38"></div><span class="black_key" data-note="37"></span>D</li>
<li><div class="anchor"></div><span></span>E</li> <li><div class="anchor" data-note="40"></div><span class="black_key" data-note="39"></span>E</li>
<li><div class="anchor"></div>F</li> <li><div class="anchor" data-note="41"></div>F</li>
<li><div class="anchor"></div><span></span>G</li> <li><div class="anchor" data-note="43"></div><span class="black_key" data-note="42"></span>G</li>
<li><div class="anchor"></div><span></span>A</li> <li><div class="anchor" data-note="45"></div><span class="black_key" data-note="44"></span>A</li>
<li><div class="anchor"></div><span></span>B</li> <li><div class="anchor" data-note="47"></div><span class="black_key" data-note="46"></span>B</li>
<li><div class="anchor"></div>C</li> <li><div class="anchor" data-note="48"></div>C</li>
<li><div class="anchor"></div><span></span>D</li> <li><div class="anchor" data-note="50"></div><span class="black_key" data-note="49"></span>D</li>
<li><div class="anchor"></div><span></span>E</li> <li><div class="anchor" data-note="52"></div><span class="black_key" data-note="51"></span>E</li>
<li><div class="anchor"></div>F</li> <li><div class="anchor" data-note="53"></div>F</li>
<li><div class="anchor"></div><span></span>G</li> <li><div class="anchor" data-note="55"></div><span class="black_key" data-note="54"></span>G</li>
<li><div class="anchor"></div><span></span>A</li> <li><div class="anchor" data-note="57"></div><span class="black_key" data-note="56"></span>A</li>
<li><div class="anchor"></div><span></span>B</li> <li><div class="anchor" data-note="59"></div><span class="black_key" data-note="58"></span>B</li>
<li><div class="anchor"></div>C</li> <li><div class="anchor" data-note="60"></div>C</li>
<li><div class="anchor"></div><span></span>D</li> <li><div class="anchor" data-note="62"></div><span class="black_key" data-note="61"></span>D</li>
<li><div class="anchor"></div><span></span>E</li> <li><div class="anchor" data-note="64"></div><span class="black_key" data-note="63"></span>E</li>
<li><div class="anchor"></div>F</li> <li><div class="anchor" data-note="65"></div>F</li>
<li><div class="anchor"></div><span></span>G</li> <li><div class="anchor" data-note="67"></div><span class="black_key" data-note="66"></span>G</li>
<li><div class="anchor"></div><span></span>A</li> <li><div class="anchor" data-note="69"></div><span class="black_key" data-note="68"></span>A</li>
<li><div class="anchor"></div><span></span>B</li> <li><div class="anchor" data-note="71"></div><span class="black_key" data-note="70"></span>B</li>
<li><div class="anchor"></div>C</li> <li><div class="anchor" data-note="72"></div>C</li>
<li><div class="anchor"></div><span></span>D</li> <li><div class="anchor" data-note="74"></div><span class="black_key" data-note="73"></span>D</li>
<li><div class="anchor"></div><span></span>E</li> <li><div class="anchor" data-note="76"></div><span class="black_key" data-note="75"></span>E</li>
<li><div class="anchor"></div>F</li> <li><div class="anchor" data-note="77"></div>F</li>
<li><div class="anchor"></div><span></span>G</li> <li><div class="anchor" data-note="79"></div><span class="black_key" data-note="78"></span>G</li>
<li><div class="anchor"></div><span></span>A</li> <li><div class="anchor" data-note="81"></div><span class="black_key" data-note="80"></span>A</li>
<li><div class="anchor"></div><span></span>B</li> <li><div class="anchor" data-note="83"></div><span class="black_key" data-note="82"></span>B</li>
<li><div class="anchor"></div>C</li> <li><div class="anchor" data-note="84"></div>C</li>
<li><div class="anchor"></div><span></span>D</li> <li><div class="anchor" data-note="86"></div><span class="black_key" data-note="85"></span>D</li>
<li><div class="anchor"></div><span></span>E</li> <li><div class="anchor" data-note="88"></div><span class="black_key" data-note="87"></span>E</li>
<li><div class="anchor"></div>F</li> <li><div class="anchor" data-note="89"></div>F</li>
<li><div class="anchor"></div><span></span>G</li> <li><div class="anchor" data-note="91"></div><span class="black_key" data-note="90"></span>G</li>
<li><div class="anchor"></div><span></span>A</li> <li><div class="anchor" data-note="93"></div><span class="black_key" data-note="92"></span>A</li>
<li><div class="anchor"></div><span></span>B</li> <li><div class="anchor" data-note="95"></div><span class="black_key" data-note="94"></span>B</li>
<li><div class="anchor"></div>C</li> <li><div class="anchor" data-note="96"></div>C</li>
<li><div class="anchor"></div><span></span>D</li> <li><div class="anchor" data-note="98"></div><span class="black_key" data-note="97"></span>D</li>
<li><div class="anchor"></div><span></span>E</li> <li><div class="anchor" data-note="100"></div><span class="black_key" data-note="99"></span>E</li>
<li><div class="anchor"></div>F</li> <li><div class="anchor" data-note="101"></div>F</li>
<li><div class="anchor"></div><span></span>G</li> <li><div class="anchor" data-note="103"></div><span class="black_key" data-note="102"></span>G</li>
<li><div class="anchor"></div><span></span>A</li> <li><div class="anchor" data-note="105"></div><span class="black_key" data-note="104"></span>A</li>
<li><div class="anchor"></div><span></span>B</li> <li><div class="anchor" data-note="107"></div><span class="black_key" data-note="106"></span>B</li>
<li><div class="anchor"></div>C</li> <li><div class="anchor" data-note="108"></div>C</li>
</ul> </ul>
</div> </div>
<script type="text/javascript" src="js/libs/require.js"></script> <script type="text/javascript" src="js/libs/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/libs/midi/AudioDetect.js"></script>
<script type="text/javascript" src="js/libs/midi/LoadPlugin.js"></script>
<script type="text/javascript" src="js/libs/midi/Plugin.js"></script>
<script type="text/javascript" src="js/libs/midi/Player.js"></script>
<script type="text/javascript" src="js/libs/window/DOMLoader.XMLHttp.js"></script>
<script src="inc/Base64.js" type="text/javascript"></script>
<script src="inc/base64binary.js" type="text/javascript"></script>
<script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/main.js"></script>
</body> </body>
</html> </html>

40
js/main.js
Unescape View File

@ -1,22 +1,30 @@
requirejs.config({ window.onload = function () {
baseUrl: 'js/', MIDI.loadPlugin({
soundfontUrl: "./soundfont/",
instrument: "acoustic_grand_piano",
callback: function() {
$('#piano').click(function(event) {
var note = $(event.target).data('note');
paths: { playNote(note)
jquery: 'libs/jquery-1.11.1.min', });
'jquery.cookie': 'lib/jquery.cookie-1.4.0', }
underscore: 'lib/underscore-1.6.0', });
fiber: 'libs/fiber.min'
}, };
function pianoReady() {
shim: {
'jquery.cookie': {
deps: ['jquery']
} }
function playNote(note) {
var delay = 0; // play one note every quarter second
var velocity = 127; // how hard the note hits
MIDI.setVolume(0, 127);
MIDI.noteOn(0, note, velocity, delay);
MIDI.noteOff(0, note, delay + 0.75);
} }
});
function getAsyncMusicData() {
require(['controllers/keysController'], }
function (KeysController) {
var controller = new KeysController();
});
Write Preview
Loading…
Cancel
Save