Added octave control buttons

P-bibs · May 28, 2019 · 4dc0f62 · 4dc0f62
1 parent a4e32c9
commit 4dc0f62
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -170,6 +170,31 @@ <h3 style="text-align: center">Instrument:</h3>
           </div>
         </div>
       </div>
+
+      <h3 style="text-align: center">Octave:</h3>
+
+      <div class="column">
+        <div class="row">
+          <div class="col-md-2 octave-button">
+            <button type="button" onclick="changeOctave(1)" class="btn btn-secondary btn-block">1</button>
+          </div>
+          <div class="col-md-2 octave-button">
+            <button type="button" onclick="changeOctave(2)" class="btn btn-secondary btn-block">2</button>
+          </div>
+          <div class="col-md-2 octave-button">
+            <button type="button" onclick="changeOctave(3)" class="btn btn-secondary btn-block">3</button>
+          </div>
+          <div class="col-md-2 octave-button">
+            <button type="button" onclick="changeOctave(4)" class="btn btn-secondary btn-block">4</button>
+          </div>
+          <div class="col-md-2 octave-button">
+            <button type="button" onclick="changeOctave(5)" class="btn btn-secondary btn-block">5</button>
+          </div>
+          <div class="col-md-2 octave-button">
+            <button type="button" onclick="changeOctave(6)" class="btn btn-secondary btn-block">6</button>
+          </div>
+        </div>
+      </div>
     </div>
 
     <br>

diff --git a/main.css b/main.css
@@ -20,7 +20,8 @@
         margin-bottom: 40px;
     }
 
-    .instrument-button {
+    .instrument-button,
+    .octave-button {
         margin-bottom: 15px;
     }
 }
@@ -45,13 +46,15 @@
     }
 }
 
-.instrument-button-active {
+.instrument-button-active,
+.octave-button-active {
     animation-name: instrument-button-activate;
     animation-fill-mode: forwards;
     animation-duration: .25s;
 }
 
-.instrument-button-inactive {
+.instrument-button-inactive,
+.ocatve-button-inactive {
     animation-name: instrument-button-deactivate;
     animation-fill-mode: forwards;
     animation-duration: .25s;

diff --git a/main.js b/main.js
@@ -13,6 +13,7 @@ var playbackTimer;
 var settings = {
   instrument: Tone.Synth,
   instrumentType: "monophonic",
+  octave: 4,
   chordsPerProg: 5,
   minimumChordalMembers: 3,
   noteDuration: 2,
@@ -36,6 +37,7 @@ async function init() {
   seed = generateRandomProg(5, settings.minimumChordalMembers);
   addConfigEventListeners();
   changeInstrument(0);
+  changeOctave(4);
   generateProg();
 }
 
@@ -169,6 +171,18 @@ function changeInstrument(num) {
 
 }
 
+function changeOctave(octave) {
+  var buttons = document.getElementsByClassName('octave-button');
+  var newButton = buttons[octave - 1].children[0];
+  var oldButton = buttons[settings.octave - 1].children[0];
+  oldButton.classList.remove("octave-button-active")
+  oldButton.classList.add("octave-button-inactive")
+  newButton.classList.remove("octave-button-inactive")
+  newButton.classList.add("octave-button-active")
+
+  settings.octave = octave;
+}
+
 function generateProg() {
   stopPlayback();
 
@@ -261,7 +275,7 @@ function playCurrentChord() {
   }
 
   console.log("attack triggered: " + currentProgMembers[currentChordIndex] + " " + currentChordIndex);
-  synth.triggerAttack(currentProgMembers[currentChordIndex].map(a => a + "4"));
+  synth.triggerAttack(currentProgMembers[currentChordIndex].map(a => a + settings.octave.toString()));
 
   var currentTile = document.getElementsByClassName("chord-tile")[currentChordIndex]
   currentTile.classList.add("chord-tile-active")