diff --git a/single-voice-synth.js b/single-voice-synth.js
index 2127123..c206ea0 100644
--- a/single-voice-synth.js
+++ b/single-voice-synth.js
@@ -57,10 +57,19 @@ class Synth {
 let globalAudioContext = new AudioContext();
 let synth = new Synth(globalAudioContext);
 
+function toggleOscillator() {
+  synth.toggleOsc();
+}
 window.onload = function() {
   console.log("hello world!");
   console.log(synth);
 
+  var selectedWaveType = document.querySelector("input[name='wave']");
+  selectedWaveType.addEventListener("change", () => {
+    let selectedWaveTypeValue = document.querySelector("input[name='wave']:checked").value; 
+    console.log("the value of the wave has changed to" + selectedWaveTypeValue);
+    synth.setOscWaveType(selectedWaveTypeValue);
+  })
   var detune = document.getElementById("detune");
   detune.addEventListener("input", () => {
     synth.setOscDetune(parseFloat(detune.value))
diff --git a/single-voice.html b/single-voice.html
index a077adc..7ec92d7 100644
--- a/single-voice.html
+++ b/single-voice.html
@@ -10,7 +10,19 @@
 
 
 <body class="bg-gray-900 p-10 mb-5">
+    
     <script src="single-voice-synth.js"></script>
     <div class="flex justify-between"></div>
+    <button onclick="toggleOscillator()">Start/Stop</button>
     <input type="range" min="-40" max="40" value="0" class="slider" id="detune">
+    <form>
+      <input type="radio" id="sine" name="wave" value="sine" checked>
+      <label for="sine">Sine</label><br>
+      <input type="radio" id="triangle" name="wave" value="triangle">
+      <label for="triangle">Triangle</label><br>
+      <input type="radio" id="square" name="wave" value="square">
+      <label for="square">Square</label><br>
+      <input type="radio" id="sawtooth" name="wave" value="sawtooth">
+      <label for="sawtooth">Sawtooth</label>
+    </form>
 </body>        
