js/piano.js

   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 }