start to organize the code better

basic.js

@@ -3,6 +3,8 @@ let gain = null;
 let selectedWave = "square";
 let baseFreq = 440;
 let currentFreq = 261.63;
+let notes = ["C", "D", "E", "F", "G", "A", "B"];
+let arpInterval = null;
 
 function octavehz(hz, octave) {
   const val = parseFloat(octave);
@@ -14,7 +16,7 @@ function noteToHz(note) {
     case "C":
       return 261.63;
     case "D":
-      return 269.66;
+      return 293.66;
     case "E":
       return 329.63;
     case "F":
@@ -25,6 +27,8 @@ function noteToHz(note) {
       return 440;
     case "B":
       return 493.88;
+    default:
+      return 0;
   }
 }
 
@@ -35,7 +39,6 @@ window.onload = function () {
     let selectedNoteButton = document.querySelector(
       "input[name='notechoice']:checked"
     );
-    console.log("note choice changed to: " + selectedNoteButton.value);
     let selectedOctaveButton = document.querySelector(
       "input[name='octavechoice']:checked"
     );
@@ -83,8 +86,20 @@ window.onload = function () {
     rb.addEventListener("change", updateOscFrequency);
   });
 
+  // handle keyboard
   window.addEventListener("keydown", (event) => {
+    if (event.repeat) return;
     switch (event.key) {
+      // play/stop
+      case "s":
+        {
+          if (osc) {
+            osc.stop();
+            osc = null;
+          }
+        }
+        break;
+      // "piano roll"
       case "1":
         selectNote("C");
         break;
@@ -124,6 +139,7 @@ window.onload = function () {
     }
   }
 
+  // gain slider
   const gainSlider = document.getElementById("gain");
   const gainDisplay = document.getElementById("gainDisplay");
   gainSlider.addEventListener("input", () => {
@@ -133,6 +149,7 @@ window.onload = function () {
     gainDisplay.textContent = level;
   });
 
+  // start button
   document.getElementById("start").addEventListener("click", () => {
     if (!osc) {
       osc = audioContext.createOscillator();
@@ -143,7 +160,6 @@ window.onload = function () {
       gain = audioContext.createGain();
     }
 
-    console.log(selectedWave);
     osc.type = selectedWave;
     osc.frequency.setValueAtTime(currentFreq, audioContext.currentTime);
     gain.gain.setTargetAtTime(
@@ -157,22 +173,45 @@ window.onload = function () {
     audioContext.resume();
   });
 
+  // stop button
   document.getElementById("stop").addEventListener("click", () => {
-    osc.stop();
+    if (osc) {
-    osc = null;
+      osc.stop();
-  });
+      osc = null;
-
+      if (arpInterval) {
-  document.getElementById("arp").addEventListener("click", () => {
+        clearInterval(arpInterval);
-    const notes = ["C", "D", "E", "F", "G", "A", "B"];
+        arpInterval = null;
-    for (let i = 0; i < notes.length; i++) {
-      for (let j = 0; j < 1000; j++) {
-        let x = 100;
       }
-      console.log(notes[i]);
+    } else {
-      osc.frequency.setValueAtTime(
+      console.log("no osc to stop");
-        noteToHz(notes[i]),
-        audioContext.currentTime
-      );
     }
   });
+
+  // arp - work in progress
+  function startArp() {
+    if (!arpInterval) {
+      baseNote = "C";
+      let currentOctave = -2;
+      if (osc) {
+        arpInterval = setInterval(() => {
+          if (currentOctave > 2) {
+            currentOctave = -2;
+          }
+
+          let noteFreq = noteToHz(baseNote);
+          let freqOctaveChoice = octavehz(noteFreq, currentOctave);
+          osc.frequency.setValueAtTime(
+            freqOctaveChoice,
+            audioContext.currentTime
+          );
+
+          currentOctave++;
+        }, 100);
+      } else {
+        console.log("no osc to run arp on");
+      }
+    }
+  }
+
+  document.getElementById("arp").addEventListener("click", startArp);
 };

src/basic.ts

@@ -9,7 +9,7 @@ function octavehz(hz: number, octave: string): number {
   return hz * 2 ** val;
 }
 
-function noteToHz(note: string): number | undefined {
+function noteToHz(note: string): number {
   switch (note) {
     case "C":
       return 261.63;
@@ -25,11 +25,13 @@ function noteToHz(note: string): number | undefined {
       return 440;
     case "B":
       return 493.88;
+    default:
+      return 0;
   }
 }
 
 window.onload = function () {
-  const audioContext = new AudioContext();
+  const audioContext: AudioContext = new AudioContext();
 
   function updateOscFrequency() {
     let selectedNoteButton = document.querySelector(

synth.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    
+    <title>simple-synth</title>
+</head>
+<body>
+    <script src="synth.js"></script>
+    
+    <div>
+        <form style="padding: 15px">
+            <legend>Voice 1</legend>  
+            <input type="radio" id="wave1_sinwave" name="wavechoice1" value="sine" checked>
+            <label for="wave1_sinwave">Sine</label>
+            <input type="radio" id="wave1_squarewave" name="wavechoice1" value="square">
+            <label for="wave1_squarewave">Square</label>
+            <input type="radio" id="wave1_triwave" name="wavechoice1" value="triangle">
+            <label for="wave1_triwave">Triangle</label>
+            <input type="radio" id="wave1_sawtoothwave" name="wavechoice1" value="sawtooth">
+            <label for="wave1_sawtoothwave">Sawtooth</label>
+        </form>
+        <button id="activateVoice1">Start</button>
+    </div>
+    
+    <form style="padding: 15px">
+        <legend>Voice 2</legend>  
+        <input type="radio" id="wave2_sinwave" name="wavechoice2" value="sine" checked>
+        <label for="wave2_sinwave">Sine</label>
+        <input type="radio" id="wave2_squarewave" name="wavechoice2" value="square">
+        <label for="wave2_squarewave">Square</label>
+        <input type="radio" id="wave2_triwave" name="wavechoice2" value="triangle">
+        <label for="wave2_triwave">Triangle</label>
+        <input type="radio" id="wave2_sawtoothwave" name="wavechoice2" value="sawtooth">
+        <label for="wave2_sawtoothwave">Sawtooth</label>
+    </form>
+    <button id="activateVoice2">Start</button>
+    
+    
+    <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>  
+            <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>
+        <button id="stop">Stop</button>
+        <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

@@ -0,0 +1,60 @@
+class Synth {
+  constructor() {
+    this.audioContext = new AudioContext();
+    this.oscillators = [];
+    this.gain = this.audioContext.createGain();
+    this.gain.connect(this.audioContext.destination);
+  }
+
+  createOscillator(type = "sine", freq = 440) {
+    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);
+    osc.connect(this.gain);
+    this.gain.connect(this.audioContext.destination);
+    this.oscillators.push(osc);
+    return osc;
+  }
+
+  startOsc(osc) {
+    osc.start();
+  }
+
+  stopOsc(osc) {
+    osc.stop();
+    const index = this.oscillators.indexOf(osc);
+    if (index !== -1) {
+      this.oscillators.splice(index, 1);
+    }
+  }
+
+  stopAll() {
+    for (let osc of this.oscillators) {
+      this.stopOsc(osc);
+    }
+  }
+}
+
+function hzoctave(freq, octave) {
+  return freq * 2 ** 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", () => {
+    console.log("voice 1 start clicked");
+    synth.audioContext.resume();
+    synth.startOsc(osc1);
+  });
+
+  document.getElementById("activateVoice2").addEventListener("click", () => {
+    console.log("voice 2 start clicked");
+    synth.audioContext.resume();
+    synth.startOsc(osc2);
+  });
+};