From bfcf2d2d066128e8afec49392c45a17f33e7fb95 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Mon, 21 Nov 2016 15:19:39 -0800 Subject: [PATCH 1/5] Can play notes by clicking or typing --- noise.css | 2 +- noise.js | 54 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 54 insertions(+), 2 deletions(-) diff --git a/noise.css b/noise.css index 5c37256..527e0ec 100644 --- a/noise.css +++ b/noise.css @@ -3,7 +3,7 @@ html { } body { - background-color: black; + background-color: black; } .instrument { diff --git a/noise.js b/noise.js index 1d6dd4b..e0d4690 100644 --- a/noise.js +++ b/noise.js @@ -1,3 +1,55 @@ +var getSourceIndex = function() { + var audio = document.createElement('audio'); + if (audio.canPlayType('audio/mpeg;')) { + return 0; + } else if (audio.canPlayType('audio/ogg;')) { + return 1; + } else { + return 2; + } +}; + +var clickToPlayTone = function() { + var index = getSourceIndex(); + + $('.instrument').on('click', 'button', function(event) { + + var note = $(this); + + if (note.hasClass('c')) {$('#cAudio')[index].play();} + else if (note.hasClass('d')) {$('#dAudio')[index].play();} + else if (note.hasClass('e')) {$('#eAudio')[index].play();} + else if (note.hasClass('f')) {$('#fAudio')[index].play();} + else if (note.hasClass('g')) {$('#gAudio')[index].play();} + else if (note.hasClass('a')) {$('#aAudio')[index].play();} + else if (note.hasClass('b')) {$('#bAudio')[index].play();} + + }); + +}; + + +var typeToPlayTone = function() { + var index = getSourceIndex(); + + $('.instrument').keydown(function(event) { + + var note = event.key; + + if (note == 'c') {$('#cAudio')[index].play();} + else if (note == 'd') {$('#dAudio')[index].play();} + else if (note == 'e') {$('#eAudio')[index].play();} + else if (note == 'f') {$('#fAudio')[index].play();} + else if (note == 'g') {$('#gAudio')[index].play();} + else if (note == 'a') {$('#aAudio')[index].play();} + else if (note == 'b') {$('#bAudio')[index].play();} + + }); + +}; + $(document).ready( function() { - // your code here + clickToPlayTone(); + typeToPlayTone(); + }); From 0f5014a545781027ebe415d92f296f46999892ef Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Mon, 21 Nov 2016 15:23:46 -0800 Subject: [PATCH 2/5] Renames a method for more clarity --- noise.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/noise.js b/noise.js index e0d4690..ac10dca 100644 --- a/noise.js +++ b/noise.js @@ -1,4 +1,4 @@ -var getSourceIndex = function() { +var getAudioSourceIndex = function() { var audio = document.createElement('audio'); if (audio.canPlayType('audio/mpeg;')) { return 0; @@ -10,7 +10,7 @@ var getSourceIndex = function() { }; var clickToPlayTone = function() { - var index = getSourceIndex(); + var index = getAudioSourceIndex(); $('.instrument').on('click', 'button', function(event) { @@ -30,7 +30,7 @@ var clickToPlayTone = function() { var typeToPlayTone = function() { - var index = getSourceIndex(); + var index = getAudioSourceIndex(); $('.instrument').keydown(function(event) { From eb7eb99e6bac0544d7a50b90bf60f64bdcea2d9e Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Mon, 21 Nov 2016 15:36:32 -0800 Subject: [PATCH 3/5] Changes scope of keydown to window instead of the instrument div --- noise.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/noise.js b/noise.js index ac10dca..9fc3a8e 100644 --- a/noise.js +++ b/noise.js @@ -32,7 +32,7 @@ var clickToPlayTone = function() { var typeToPlayTone = function() { var index = getAudioSourceIndex(); - $('.instrument').keydown(function(event) { + $(window).keydown(function(event) { var note = event.key; From a0431274743e08987ef0a2153b095f5304c48f9f Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Mon, 21 Nov 2016 15:43:44 -0800 Subject: [PATCH 4/5] Flashes active color on keypress --- noise.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/noise.js b/noise.js index 9fc3a8e..dbe1ff9 100644 --- a/noise.js +++ b/noise.js @@ -28,6 +28,23 @@ var clickToPlayTone = function() { }; +var flashColorOnPlay = function(note) { + + // flashes color like clicking + + // adds color + $('.' + note).addClass('active'); + + // removes color + var resetColor = function() { + $('.' + note).removeClass('active'); + }; + + // delays removal of color to give the flash + var timeoutID = window.setTimeout(resetColor, 100); + +}; + var typeToPlayTone = function() { var index = getAudioSourceIndex(); @@ -44,10 +61,13 @@ var typeToPlayTone = function() { else if (note == 'a') {$('#aAudio')[index].play();} else if (note == 'b') {$('#bAudio')[index].play();} - }); + flashColorOnPlay(note); + }); }; + + $(document).ready( function() { clickToPlayTone(); typeToPlayTone(); From b2c33ec20e3ab41a9179c546456756931497ecf1 Mon Sep 17 00:00:00 2001 From: Sarah Nahmias Date: Mon, 21 Nov 2016 16:05:26 -0800 Subject: [PATCH 5/5] Refactors for Kari's enjoyment --- noise.js | 27 +++++++-------------------- 1 file changed, 7 insertions(+), 20 deletions(-) diff --git a/noise.js b/noise.js index dbe1ff9..af013b3 100644 --- a/noise.js +++ b/noise.js @@ -12,17 +12,11 @@ var getAudioSourceIndex = function() { var clickToPlayTone = function() { var index = getAudioSourceIndex(); - $('.instrument').on('click', 'button', function(event) { + $('.instrument').on('click', 'button', function(event) { - var note = $(this); - - if (note.hasClass('c')) {$('#cAudio')[index].play();} - else if (note.hasClass('d')) {$('#dAudio')[index].play();} - else if (note.hasClass('e')) {$('#eAudio')[index].play();} - else if (note.hasClass('f')) {$('#fAudio')[index].play();} - else if (note.hasClass('g')) {$('#gAudio')[index].play();} - else if (note.hasClass('a')) {$('#aAudio')[index].play();} - else if (note.hasClass('b')) {$('#bAudio')[index].play();} + // classes are named 'note *' --> note = 5 + var noteLetter = $(this).attr('class')[5]; + $('#' + noteLetter + 'Audio')[index].play(); }); @@ -51,17 +45,10 @@ var typeToPlayTone = function() { $(window).keydown(function(event) { - var note = event.key; - - if (note == 'c') {$('#cAudio')[index].play();} - else if (note == 'd') {$('#dAudio')[index].play();} - else if (note == 'e') {$('#eAudio')[index].play();} - else if (note == 'f') {$('#fAudio')[index].play();} - else if (note == 'g') {$('#gAudio')[index].play();} - else if (note == 'a') {$('#aAudio')[index].play();} - else if (note == 'b') {$('#bAudio')[index].play();} + var noteLetter = event.key; + $('#' + noteLetter + 'Audio')[index].play(); - flashColorOnPlay(note); + flashColorOnPlay(noteLetter); }); };