adds individual octave selection for each voice

synth.html

@@ -22,9 +22,34 @@
             <input type="radio" id="wave1_sawtoothwave" name="wavechoice1" value="sawtooth">
             <label for="wave1_sawtoothwave">Sawtooth</label>
         </form>
-        <button id="activateVoice1">Start</button>
+        <button id="activateVoice1" style="background-color: greenyellow;">Start</button>
+        <form style="padding: 15px">
+            <fieldset>
+                <legend>Octave Selection</legend>  
+                <input type="radio" id="minus2" name="octavechoice1" value="-2">
+                <label for="minus2">-2</label>
+                
+                <input type="radio" id="minus1" name="octavechoice1" value="-1">
+                <label for="minus1">-1</label>
+                
+                <input type="radio" id="plus0" name="octavechoice1" value="0" checked>
+                <label for="plus0">0</label>
+                
+                <input type="radio" id="plus1" name="octavechoice1" value="1">
+                <label for="plus1">+1</label>
+                
+                <input type="radio" id="plus2" name="octavechoice1" value="2">
+                <label for="plus2">+2</label>
+                
+            </fieldset>
+        </form>
+        <label for="detunevoice1">detune voice</label>
+        <input id="detunevoice1" type="range" min="-3" max="3" value="0" step=".1"/>
+        <span id="detunevoice1display">0</span>
     </div>
     
+    <div>
+        
         <form style="padding: 15px">
             <legend>Voice 2</legend>  
             <input type="radio" id="wave2_sinwave" name="wavechoice2" value="sine" checked>
@@ -36,7 +61,64 @@
             <input type="radio" id="wave2_sawtoothwave" name="wavechoice2" value="sawtooth">
             <label for="wave2_sawtoothwave">Sawtooth</label>
         </form>
-    <button id="activateVoice2">Start</button>
+        <button id="activateVoice2" style="background-color: greenyellow;">Start</button>
+        <form style="padding: 15px">
+            <fieldset>
+                <legend>Octave Selection</legend>  
+                <input type="radio" id="minus2" name="octavechoice2" value="-2">
+                <label for="minus2">-2</label>
+                
+                <input type="radio" id="minus1" name="octavechoice2" value="-1">
+                <label for="minus1">-1</label>
+                
+                <input type="radio" id="plus0" name="octavechoice2" value="0" checked>
+                <label for="plus0">0</label>
+                
+                <input type="radio" id="plus1" name="octavechoice2" value="1">
+                <label for="plus1">+1</label>
+                
+                <input type="radio" id="plus2" name="octavechoice2" value="2">
+                <label for="plus2">+2</label>
+                
+            </fieldset>
+        </form>
+    </div>
+    
+    <div>
+        
+        <form style="padding: 15px">
+            <legend>Voice 2</legend>  
+            <input type="radio" id="wave3_sinwave" name="wavechoice2" value="sine" checked>
+            <label for="wave3_sinwave">Sine</label>
+            <input type="radio" id="wave3_squarewave" name="wavechoice2" value="square">
+            <label for="wave3_squarewave">Square</label>
+            <input type="radio" id="wave3_triwave" name="wavechoice2" value="triangle">
+            <label for="wave3_triwave">Triangle</label>
+            <input type="radio" id="wave3_sawtoothwave" name="wavechoice2" value="sawtooth">
+            <label for="wave3_sawtoothwave">Sawtooth</label>
+        </form>
+        <button id="activateVoice3" style="background-color: greenyellow;">Start</button>
+        <form style="padding: 15px">
+            <fieldset>
+                <legend>Octave Selection</legend>  
+                <input type="radio" id="minus2" name="octavechoice3" value="-2">
+                <label for="minus2">-2</label>
+                
+                <input type="radio" id="minus1" name="octavechoice3" value="-1">
+                <label for="minus1">-1</label>
+                
+                <input type="radio" id="plus0" name="octavechoice3" value="0" checked>
+                <label for="plus0">0</label>
+                
+                <input type="radio" id="plus1" name="octavechoice3" value="1">
+                <label for="plus1">+1</label>
+                
+                <input type="radio" id="plus2" name="octavechoice3" value="2">
+                <label for="plus2">+2</label>
+                
+            </fieldset>
+        </form>
+    </div>
     
     
     <form style="padding: 15px">
@@ -67,36 +149,8 @@
     </form>
     
     
-    <form style="padding: 15px">
-        <fieldset>
-            <legend>Octave Selection</legend>  
-            <input type="radio" id="minus2" name="octavechoice" value="-2">
-            <label for="minus2">-2</label>
-            
-            <input type="radio" id="minus1" name="octavechoice" value="-1">
-            <label for="minus1">-1</label>
-            
-            <input type="radio" id="plus0" name="octavechoice" value="0" checked>
-            <label for="plus0">0</label>
-            
-            <input type="radio" id="plus1" name="octavechoice" value="1">
-            <label for="plus1">+1</label>
-            
-            <input type="radio" id="plus2" name="octavechoice" value="2">
-            <label for="plus2">+2</label>
-            
-        </fieldset>
-    </form>
     
     
-    <div style="padding: 15px">
+    
-        <button id="start">Start</button>
+</body>
-        <button id="stop">Stop</button>
+</html>
-        <button id="arp">Arp</button>
-        <div style="padding: 10px;">
-            <label for="gain">Volume</label>
-            <input id="gain" type="range" min="0" max=".1" value=".05" step=".001"/>
-            <span id="gainDisplay">.5</span>
-        </div>
-    </body>
-    </html>

synth.js

@@ -1,8 +1,33 @@
+function noteToHz(note) {
+  switch (note) {
+    case "C":
+      return 261.63;
+    case "D":
+      return 293.66;
+    case "E":
+      return 329.63;
+    case "F":
+      return 349.23;
+    case "G":
+      return 392;
+    case "A":
+      return 440;
+    case "B":
+      return 493.88;
+    default:
+      return 0;
+  }
+}
+
 class Synth {
   constructor() {
     this.audioContext = new AudioContext();
-    this.oscillators = [];
     this.gain = this.audioContext.createGain();
+    this.oscillators = [
+      this.createOscillator("sawtooth", hzoctave(440, -1)),
+      this.createOscillator("sawtooth", hzoctave(435, -1)),
+      this.createOscillator("sawtooth", hzoctave(440, -3)),
+    ];
     this.gain.connect(this.audioContext.destination);
   }
 
@@ -10,22 +35,38 @@ class Synth {
     const osc = this.audioContext.createOscillator();
     osc.type = type;
     osc.frequency.setValueAtTime(freq, this.audioContext.currentTime);
-    this.gain.gain.setTargetAtTime(0.5, this.audioContext.currentTime, 0);
+    // connect it to the gain node
+    this.gain.gain.setTargetAtTime(0.1, this.audioContext.currentTime, 0);
     osc.connect(this.gain);
-    this.gain.connect(this.audioContext.destination);
+
-    this.oscillators.push(osc);
+    // wrap around the container and add to array
-    return osc;
+    const oscContainer = { osc, isPlaying: false };
+    return oscContainer;
   }
 
-  startOsc(osc) {
+  startOsc(oscContainer) {
-    osc.start();
+    if (!oscContainer.isPlaying) {
+      oscContainer.osc.start();
+      oscContainer.isPlaying = true;
+    }
   }
 
-  stopOsc(osc) {
+  stopOsc(oscContainer) {
-    osc.stop();
+    if (oscContainer.isPlaying) {
-    const index = this.oscillators.indexOf(osc);
+      let currentFreq = oscContainer.osc.frequency.value;
-    if (index !== -1) {
+      console.log("the current frequency: " + currentFreq);
-      this.oscillators.splice(index, 1);
+      let currentType = oscContainer.osc.type;
+      console.log("the current type: " + currentType);
+      oscContainer.osc.stop();
+      oscContainer.isPlaying = false;
+      oscContainer.osc = this.audioContext.createOscillator();
+      oscContainer.osc.type = currentType;
+      oscContainer.osc.frequency.setValueAtTime(
+        currentFreq,
+        this.audioContext.currentTime
+      );
+      oscContainer.osc.connect(this.gain);
+      console.log(oscContainer);
     }
   }
 
@@ -42,19 +83,126 @@ function hzoctave(freq, octave) {
 
 window.onload = function () {
   let synth = new Synth();
-  let osc1 = synth.createOscillator("square", hzoctave(440, -1));
-  let osc2 = synth.createOscillator("square", hzoctave(440, -1) - 2);
   // start button
 
-  document.getElementById("activateVoice1").addEventListener("click", () => {
+  function updateFrequency(event, oscContainer, octaveid, detuneAmount) {
+    console.log("the value of octaveid: " + octaveid);
+    console.log("the value of detuneAmount: " + detuneAmount);
+    let selectedNote = document.querySelector(
+      "input[name='notechoice']:checked"
+    ).value;
+
+    if (octaveid) {
+      console.log("in the octave update");
+      let selectedOctave = document.querySelector(
+        `input[name='${octaveid}']:checked`
+      ).value;
+
+      oscContainer.osc.frequency.setValueAtTime(
+        hzoctave(noteToHz(selectedNote), parseFloat(selectedOctave)),
+        synth.audioContext.currentTime
+      );
+    }
+
+    if (detuneAmount) {
+      let currFreq = oscContainer.osc.frequency.value;
+      oscContainer.osc.frequency.setValueAtTime(
+        currFreq + detuneAmount,
+        synth.audioContext.currentTime
+      );
+    }
+  }
+
+  document
+    .getElementById("activateVoice1")
+    .addEventListener("click", (event) => {
       console.log("voice 1 start clicked");
       synth.audioContext.resume();
+      let osc1 = synth.oscillators[0];
+      if (osc1.isPlaying) {
+        synth.stopOsc(osc1);
+        event.target.textContent = "Start";
+        event.target.style.backgroundColor = "greenyellow";
+      } else {
         synth.startOsc(osc1);
+        event.target.textContent = "Stop";
+        event.target.style.backgroundColor = "red";
+      }
     });
 
-  document.getElementById("activateVoice2").addEventListener("click", () => {
+  document
+    .getElementById("activateVoice2")
+    .addEventListener("click", (event) => {
       console.log("voice 2 start clicked");
       synth.audioContext.resume();
+      let osc2 = synth.oscillators[1];
+      if (osc2.isPlaying) {
+        synth.stopOsc(osc2);
+        event.target.textContent = "Start";
+        event.target.style.backgroundColor = "greenyellow";
+      } else {
         synth.startOsc(osc2);
+        event.target.textContent = "Stop";
+        event.target.style.backgroundColor = "red";
+      }
+    });
+
+  document
+    .getElementById("activateVoice3")
+    .addEventListener("click", (event) => {
+      console.log("voice 3 start clicked");
+      synth.audioContext.resume();
+      let osc3 = synth.oscillators[2];
+      if (osc3.isPlaying) {
+        synth.stopOsc(osc3);
+        event.target.textContent = "Start";
+        event.target.style.backgroundColor = "greenyellow";
+      } else {
+        synth.startOsc(osc3);
+        event.target.textContent = "Stop";
+        event.target.style.backgroundColor = "red";
+      }
+    });
+
+  document
+    .querySelectorAll("input[name='notechoice']")
+    .forEach((radioButton) => {
+      console.log("note changed");
+      radioButton.addEventListener("change", updateFrequency, null, null);
+    });
+
+  document
+    .querySelectorAll("input[name='octavechoice1']")
+    .forEach((radioButton) => {
+      console.log("octave changed");
+      radioButton.addEventListener("change", (event) => {
+        updateFrequency(event, synth.oscillators[0], "octavechoice1", null);
+      });
+    });
+
+  document
+    .querySelectorAll("input[name='octavechoice2']")
+    .forEach((radioButton) => {
+      console.log("octave changed");
+      radioButton.addEventListener("change", (event) => {
+        updateFrequency(event, synth.oscillators[1], "octavechoice2", null);
+      });
+    });
+
+  document
+    .querySelectorAll("input[name='octavechoice3']")
+    .forEach((radioButton) => {
+      console.log("octave changed");
+      radioButton.addEventListener("change", (event) => {
+        updateFrequency(event, synth.oscillators[2], "octavechoice3", null);
+      });
+    });
+
+  // detune
+  const detuneSliderVoice1 = document.getElementById("detunevoice1");
+  const detunevoice1Display = document.getElementById("detunevoice1display");
+  detuneSliderVoice1.addEventListener("input", (event) => {
+    let osc = synth.oscillators[0];
+    updateFrequency(event, osc, null, parseFloat(detuneSliderVoice1.value));
   });
 };