| 1 | /* This Source Code Form is subject to the terms of the Mozilla Public |
| 2 | * License, v. 2.0. If a copy of the MPL was not distributed with this file, |
| 3 | * You can obtain one at http://mozilla.org/MPL/2.0/. */ |
| 4 | |
| 5 | var gSounds = {}; |
| 6 | |
| 7 | window.onload = function() { |
| 8 | // Create objects, makes sure that all the audio gets loaded. |
| 9 | gSounds.c1 = new Audio("sound/piano_c1.opus"); |
| 10 | gSounds.d1 = new Audio("sound/piano_d1.opus"); |
| 11 | gSounds.e1 = new Audio("sound/piano_e1.opus"); |
| 12 | gSounds.f1 = new Audio("sound/piano_f1.opus"); |
| 13 | gSounds.g1 = new Audio("sound/piano_g1.opus"); |
| 14 | gSounds.a1 = new Audio("sound/piano_a1.opus"); |
| 15 | gSounds.b1 = new Audio("sound/piano_b1.opus"); |
| 16 | gSounds.c2 = new Audio("sound/piano_c2.opus"); |
| 17 | |
| 18 | document.getElementById("body").addEventListener("keydown", eventHandler, false); |
| 19 | } |
| 20 | |
| 21 | var eventHandler = { |
| 22 | handleEvent: function(aEvent) { |
| 23 | switch (aEvent.type) { |
| 24 | case "keydown": |
| 25 | // Should use aEvent.key instead of aEvent.which but needs bug 680830. |
| 26 | // See https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/keydown |
| 27 | switch (aEvent.which) { |
| 28 | case 32: // space |
| 29 | gPitches.play("c1"); |
| 30 | break; |
| 31 | case 39: // right |
| 32 | gPitches.play("d1"); |
| 33 | break; |
| 34 | case 38: // up |
| 35 | gPitches.play("e1"); |
| 36 | break; |
| 37 | case 37: // left |
| 38 | gPitches.play("f1"); |
| 39 | break; |
| 40 | case 40: // down |
| 41 | gPitches.play("g1"); |
| 42 | break; |
| 43 | case 87: // w |
| 44 | gPitches.play("a1"); |
| 45 | break; |
| 46 | case 65: // a |
| 47 | gPitches.play("b1"); |
| 48 | break; |
| 49 | case 83: // s |
| 50 | gPitches.play("c2"); |
| 51 | break; |
| 52 | default: // not supported |
| 53 | console.log("key not supported: " + aEvent.which); |
| 54 | break; |
| 55 | } |
| 56 | } |
| 57 | } |
| 58 | }; |
| 59 | |
| 60 | var gPitches = { |
| 61 | play: function(aPitchName) { |
| 62 | gPitches.flash(aPitchName); |
| 63 | var pitchSound = new Audio(gSounds[aPitchName].src); |
| 64 | pitchSound.play(); |
| 65 | }, |
| 66 | |
| 67 | flash: function(aPitchName) { |
| 68 | document.getElementById(aPitchName + "-upper").classList.add("active"); |
| 69 | document.getElementById(aPitchName + "-lower").classList.add("active"); |
| 70 | setTimeout(gPitches.unflash, 200, aPitchName); |
| 71 | }, |
| 72 | |
| 73 | unflash: function(aPitchName) { |
| 74 | document.getElementById(aPitchName + "-upper").classList.remove("active"); |
| 75 | document.getElementById(aPitchName + "-lower").classList.remove("active"); |
| 76 | } |
| 77 | }; |
| 78 | |
| 79 | function toggleHelp() { |
| 80 | document.getElementById("helpdesc").classList.toggle("hidden"); |
| 81 | } |