removes the frequncy slider and instead radios for the c scale

README.md

@@ -11,4 +11,9 @@ that Fabilter's Synth One has:
 - [x] Waveform
 - [ ] Octave Selector
 - [ ] Noise 
-- [ ] Keyboard
+- [ ] Keyboard
+
+# Effects 
+
+- [ ] Reverb
+- [ ] Delay

basic.html

@@ -23,6 +23,34 @@
       </fieldset>
     </form>
 
+    <form style="padding: 15px">
+      <fieldset>
+        <legend>Keyboard</legend>  
+        <input type="radio" id="noteC"  name="notechoice" value="C" checked>
+        <label for="C">C</label>
+        
+        <input type="radio" id="noteD" name="notechoice" value="D">
+        <label for="D">D</label>
+        
+        <input type="radio" id="noteE" name="notechoice" value="E">
+        <label for="E">E</label>
+        
+        <input type="radio" id="noteF" name="notechoice" value="F">
+        <label for="F">F</label>
+        
+        <input type="radio" id="noteG" name="notechoice" value="G">
+        <label for="G">G</label>
+
+        <input type="radio" id="noteA" name="notechoice" value="A">
+        <label for="A">A</label>
+
+        <input type="radio" id="noteB" name="notechoice" value="B">
+        <label for="B">B</label>
+        
+      </fieldset>
+    </form>
+
+
     <form style="padding: 15px">
       <fieldset>
         <legend>Octave Selection</legend>  
@@ -48,12 +76,6 @@
     <div style="padding: 15px">
       <button id="start">Start</button>
       <button id="stop">Stop</button>
-    </div>
-      <div style="padding: 10px;">
-      <label for="freq">Frequency</label>
-      <input id="freq" type="range" min="100" max="700" value="440" step="10">
-      <span id="freqDisplay">440</span>Hz
-    </div>
     <div style="padding: 10px;">
       <label for="gain">Volume</label>
       <input id="gain" type="range" min="0" max=".1" value=".05" step=".001"/>

basic.js

@@ -1,32 +1,35 @@
 let osc = null;
 let gain = null;
-let selectedWave;
+let selectedWave = "square";
+let baseFreq = 440;
+let currentFreq = 261.63;
 
 function octavehz(hz, octave) {
   const val = parseFloat(octave);
   return hz * 2 ** val;
 }
 
+function noteToHz(note) {
+  switch (note) {
+    case "C":
+      return 261.63;
+    case "D":
+      return 269.66;
+    case "E":
+      return 329.63;
+    case "F":
+      return 349.23;
+    case "G":
+      return 392;
+    case "A":
+      return 440;
+    case "B":
+      return 493.88;
+  }
+}
+
 window.onload = function () {
   const audioContext = new AudioContext();
-  // this gets the node for the start butten and adds to it an even listener for click, when clicked the synth will play
-
-  const freqSlider = document.getElementById("freq");
-  const freqDisplay = document.getElementById("freqDisplay");
-  freqSlider.addEventListener("input", () => {
-    const freq = parseFloat(freqSlider.value);
-    osc.frequency.setValueAtTime(freq, audioContext.currentTime);
-    freqDisplay.textContent = freq;
-  });
-
-  const gainSlider = document.getElementById("gain");
-  const gainDisplay = document.getElementById("gainDisplay");
-  gainSlider.addEventListener("input", () => {
-    const level = parseFloat(gainSlider.value);
-    console.log(level);
-    gain.gain.setTargetAtTime(level, audioContext.currentTime, 0.01);
-    gainDisplay.textContent = level;
-  });
 
   function handleWaveformSelectionChange() {
     let selectedRadioButton = document.querySelector(
@@ -48,19 +51,38 @@ window.onload = function () {
       "input[name='octavechoice']:checked"
     );
     if (selectedRadioButton) {
-      selectedOctave = selectedRadioButton.value;
+      selectedOctave = parseFloat(selectedRadioButton.value);
       if (osc) {
-        osc.frequency.setValueAtTime(
+        newFreq = octavehz(currentFreq, selectedOctave);
-          octavehz(parseFloat(freq.value), parseFloat(selectedOctave)),
+        console.log("selected base frequency " + newFreq);
-          audioContext.currentTime
+        osc.frequency.setValueAtTime(newFreq, audioContext.currentTime);
-        );
       }
-      console.log(selectedWave);
     } else {
       console.log("No radio button is selected.");
     }
   }
 
+  function handleNoteChange() {
+    let selectedRadioButton = document.querySelector(
+      "input[name='notechoice']:checked"
+    );
+    if (selectedRadioButton) {
+      selectedNote = selectedRadioButton.value;
+      console.log(selectedNote);
+      if (osc) {
+        currentFreq = noteToHz(selectedNote);
+        osc.frequency.setValueAtTime(currentFreq, audioContext.currentTime);
+      }
+      console.log(octavehz(baseFreq, selectedOctave));
+    } else {
+      console.log("No radio button is selected.");
+    }
+  }
+
+  document.querySelectorAll("input[name='notechoice']").forEach((rb) => {
+    rb.addEventListener("change", handleNoteChange);
+  });
+
   document
     .querySelectorAll("input[name='wavechoice']")
     .forEach((radioButton) => {
@@ -71,20 +93,28 @@ window.onload = function () {
     rb.addEventListener("change", handleOctaveSelectionChange);
   });
 
+  const gainSlider = document.getElementById("gain");
+  const gainDisplay = document.getElementById("gainDisplay");
+  gainSlider.addEventListener("input", () => {
+    const level = parseFloat(gainSlider.value);
+    console.log(level);
+    gain.gain.setTargetAtTime(level, audioContext.currentTime, 0.01);
+    gainDisplay.textContent = level;
+  });
+
   document.getElementById("start").addEventListener("click", () => {
     if (!osc) {
       osc = audioContext.createOscillator();
+      console.log("new osc created!");
     }
 
     if (!gain) {
       gain = audioContext.createGain();
     }
 
+    console.log(selectedWave);
     osc.type = selectedWave;
-    osc.frequency.setValueAtTime(
+    osc.frequency.setValueAtTime(currentFreq, audioContext.currentTime);
-      parseFloat(freq.value),
-      audioContext.currentTime
-    );
     gain.gain.setTargetAtTime(
       parseFloat(gainSlider.value),
       audioContext.currentTime,