From: Robert Kaiser Date: Sat, 30 Mar 2013 20:28:44 +0000 (+0100) Subject: add initial version of MaKey MaKey piano X-Git-Tag: production~1 X-Git-Url: https://git-public.kairo.at/?p=makeypiano.git;a=commitdiff_plain;h=cab0e98d29b3b91e1a1f1d39c31866f55e351fff;ds=sidebyside add initial version of MaKey MaKey piano --- cab0e98d29b3b91e1a1f1d39c31866f55e351fff diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e69de29 diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..802ba10 --- /dev/null +++ b/LICENSE @@ -0,0 +1,5 @@ +This project is subject to the terms of the Mozilla Public License, v. 2.0 +(MPL2). +MPL2 applies per file so there is a license boilerplate in every file pointing +to the license. +See http://mozilla.org/MPL/2.0/. \ No newline at end of file diff --git a/README b/README new file mode 100644 index 0000000..74ca343 --- /dev/null +++ b/README @@ -0,0 +1,14 @@ +This web app is mainly targeted at people playing with a MaKeyMaKey - +see http://makeymakey.com/ - and maps certain keys to piano sounds. + +The keys space, left, up, right, down, w, a, s are mapped to C major pitches. + + +This app is running on http://piano.kairo.at/ + + +The main repo is http://git-public.kairo.at/?p=makeypiano.git;a=summary but +it's listed on GitHub at https://github.com/KaiRo-at/makeypiano for convenience +for potential contributors. See the TODO for tasks that you can help with. + +Please don't use GitHub for issue tracking but http://bugzilla.kairo.at/ diff --git a/index.html b/index.html new file mode 100644 index 0000000..054137c --- /dev/null +++ b/index.html @@ -0,0 +1,77 @@ + + + + + + + + + MaKey MaKey Piano + + + + + +

MaKey MaKey Piano

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+ + +

Connect a MaKey MaKey to Bananas or +whatever you like, keys will match C major pitches as follows:

+ + + + + + + + + + + +

Key	Pitch
Space	C'
Right	D'
Up	E'
Left	F'
Down	G'
W	A'
A	B'
S	C''

+ + + \ No newline at end of file diff --git a/js/piano.js b/js/piano.js new file mode 100644 index 0000000..8066d1c --- /dev/null +++ b/js/piano.js @@ -0,0 +1,81 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +var gSounds = {}; + +window.onload = function() { + // Create objects, makes sure that all the audio gets loaded. + gSounds.c1 = new Audio("sound/piano_c1.opus"); + gSounds.d1 = new Audio("sound/piano_d1.opus"); + gSounds.e1 = new Audio("sound/piano_e1.opus"); + gSounds.f1 = new Audio("sound/piano_f1.opus"); + gSounds.g1 = new Audio("sound/piano_g1.opus"); + gSounds.a1 = new Audio("sound/piano_a1.opus"); + gSounds.b1 = new Audio("sound/piano_b1.opus"); + gSounds.c2 = new Audio("sound/piano_c2.opus"); + + document.getElementById("body").addEventListener("keydown", eventHandler, false); +} + +var eventHandler = { + handleEvent: function(aEvent) { + switch (aEvent.type) { + case "keydown": + // Should use aEvent.key instead of aEvent.which but needs bug 680830. + // See https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/keydown + switch (aEvent.which) { + case 32: // space + gPitches.play("c1"); + break; + case 39: // right + gPitches.play("d1"); + break; + case 38: // up + gPitches.play("e1"); + break; + case 37: // left + gPitches.play("f1"); + break; + case 40: // down + gPitches.play("g1"); + break; + case 87: // w + gPitches.play("a1"); + break; + case 65: // a + gPitches.play("b1"); + break; + case 83: // s + gPitches.play("c2"); + break; + default: // not supported + console.log("key not supported: " + aEvent.which); + break; + } + } + } +}; + +var gPitches = { + play: function(aPitchName) { + gPitches.flash(aPitchName); + var pitchSound = new Audio(gSounds[aPitchName].src); + pitchSound.play(); + }, + + flash: function(aPitchName) { + document.getElementById(aPitchName + "-upper").classList.add("active"); + document.getElementById(aPitchName + "-lower").classList.add("active"); + setTimeout(gPitches.unflash, 200, aPitchName); + }, + + unflash: function(aPitchName) { + document.getElementById(aPitchName + "-upper").classList.remove("active"); + document.getElementById(aPitchName + "-lower").classList.remove("active"); + } +}; + +function toggleHelp() { + document.getElementById("helpdesc").classList.toggle("hidden"); +} diff --git a/manifest.appcache b/manifest.appcache new file mode 100644 index 0000000..6f557ac --- /dev/null +++ b/manifest.appcache @@ -0,0 +1,21 @@ +CACHE MANIFEST + +# 2013-03-30 +manifest.webapp +js/piano.js +sound/piano_c1.opus +sound/piano_d1.opus +sound/piano_e1.opus +sound/piano_f1.opus +sound/piano_g1.opus +sound/piano_a1.opus +sound/piano_b1.opus +sound/piano_c2.opus +style/piano.css +style/pianoIcon16.png +style/pianoIcon32.png +style/pianoIcon64.png +style/pianoIcon128.png + +NETWORK: +* diff --git a/manifest.webapp b/manifest.webapp new file mode 100644 index 0000000..6c270e5 --- /dev/null +++ b/manifest.webapp @@ -0,0 +1,17 @@ +{ + "name": "MaKey MaKey Piano", + "description": "Play piano pitches as a reaction to MaKey MaKey signals.", + "launch_path": "/index.html", + "appcache_path": "/manifest.appcache" + }, + "developer": { + "name": "Robert Kaiser", + "url": "http://www.kairo.at/" + }, + "icons": { + "16": "/style/pianoIcon16.png", + "32": "/style/pianoIcon32.png", + "64": "/style/pianoIcon64.png", + "128": "/style/pianoIcon128.png" + } +} diff --git a/sound/piano_a1.opus b/sound/piano_a1.opus new file mode 100644 index 0000000..bc4379f Binary files /dev/null and b/sound/piano_a1.opus differ diff --git a/sound/piano_b1.opus b/sound/piano_b1.opus new file mode 100644 index 0000000..fde821d Binary files /dev/null and b/sound/piano_b1.opus differ diff --git a/sound/piano_c1.opus b/sound/piano_c1.opus new file mode 100644 index 0000000..2fc7c4e Binary files /dev/null and b/sound/piano_c1.opus differ diff --git a/sound/piano_c2.opus b/sound/piano_c2.opus new file mode 100644 index 0000000..c1b1df1 Binary files /dev/null and b/sound/piano_c2.opus differ diff --git a/sound/piano_d1.opus b/sound/piano_d1.opus new file mode 100644 index 0000000..c8d05a8 Binary files /dev/null and b/sound/piano_d1.opus differ diff --git a/sound/piano_e1.opus b/sound/piano_e1.opus new file mode 100644 index 0000000..a7ee6b4 Binary files /dev/null and b/sound/piano_e1.opus differ diff --git a/sound/piano_f1.opus b/sound/piano_f1.opus new file mode 100644 index 0000000..fe2aa9d Binary files /dev/null and b/sound/piano_f1.opus differ diff --git a/sound/piano_g1.opus b/sound/piano_g1.opus new file mode 100644 index 0000000..c57ba4f Binary files /dev/null and b/sound/piano_g1.opus differ diff --git a/style/piano.css b/style/piano.css new file mode 100644 index 0000000..927b589 --- /dev/null +++ b/style/piano.css @@ -0,0 +1,123 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +body { + font-family: sans-serif; + background-color: #222222; + color: white; + margin: 0; + padding: 0; +} + +h1 { + display: none; +} + +#keyboard { + margin: auto; + margin-top: 10em; + padding: 0; + border: none; + width: 48em; + height: 20em; + border-collapse: collapse; + border-spacing: 0 0; +} + +.key { + transition: background-color 100ms; +} + +.key.upper, +.key.black { + border: 1px solid black; + border-bottom: none; + height: 50%; + width: 8.33%; +} + +.key.upper.small, +.key.black.small { + width: 4.17%; +} + +.key.lower { + border: 1px solid black; + border-top: none; + vertical-align: bottom; + text-align: center; + font-size: 2em; + font-weight: bold; + height: 50%; +} + +.key.white { + background-color: white; + color: gray; +} + +.key.black { + background-color: black; + color: gray; +} + +.key.active { + background-color: yellow; +} + +#helptoggle { + position: absolute; + right: 1em; + bottom: 1em; + font-size: 1.5em; +} + +#helpdesc { + position: absolute; + left: 0; + right: 0; + top: 10em; + background-color: rgba(204, 204, 204, .95); + color: #222222; + width: 24em; + margin: auto; + padding: 1em; + border: 1px solid black; + border-radius: 1em; + z-index: 10; +} + +#helpdesc.hidden { + display: none; +} + +#helpdesc > p { + margin-top: 0; + margin-bottom: 1em; +} + +#helptable, +#helphide { + margin: auto; + padding: 0; + width: 8em; +} + +#helptable { + border: 0; + border-collapse: collapse; + border-spacing: 0 0; +} + +#helptable td { + text-align: center; +} + +#helphide { + margin-top: 1em; +} + +#helphide > button { + width: 8em; +}