Volume control is added

Author: nickarora

app/css/style.css

@@ -92,7 +92,7 @@ main {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 0 auto 1fr 3.875rem auto;
-  transition: grid-template-rows 300ms;
+  transition: grid-template-rows 150ms;
 
   position: relative;
 
@@ -111,7 +111,7 @@ main {
   }
 
   &.settings-open {
-    grid-template-rows: 3.5rem auto 1fr 3.875rem auto;
+    grid-template-rows: 9rem auto 1fr 3.875rem auto;
   }
 }
 
@@ -150,7 +150,7 @@ h1 {
   flex-direction: column;
   overflow: hidden;
 
-  .words-per-minute {
+  .words-per-minute, .volume {
     display: grid;
     row-gap: 0.5rem;
     column-gap: 1rem;
@@ -173,6 +173,10 @@ h1 {
       text-align: right;
     }
   }
+
+  .volume {
+    margin-top: 1rem;
+  }
 }
 
 input[type="range"]::-webkit-slider-runnable-track {
@@ -581,7 +585,7 @@ button.signal-on {
     }
 
     &.settings-open {
-      grid-template-rows: 3.5rem auto 1fr auto;
+      grid-template-rows: 9rem auto 1fr auto;
     }
   }
 }

app/index.html

@@ -31,6 +31,11 @@
           <input type="range" name="words-per-minute" min="3" max="15" class="words-per-minute" />
           <span class="value"></span>
         </div>
+        <div class="volume">
+          <label for="volume">Volume</label>
+          <input type="range" name="volume" min="0" max="100" value="50" />
+          <span class="value">50%</span>
+        </div>
       </div>
 
       <h1>International <span class="no-wrap">Morse Decoder</span></h1>

app/script/audio.js

@@ -1,5 +1,9 @@
 const audioCtx = new (window.AudioContext || window.webkitAudioContext)()
 
+const gainNode = audioCtx.createGain()
+gainNode.connect(audioCtx.destination)
+gainNode.gain.value = 0.5
+
 function isAudioSuspended() {
   return audioCtx.state === 'suspended'
 }
@@ -14,8 +18,7 @@ function createOscillator() {
   const currentTime = audioCtx.currentTime
   oscillator.frequency.setValueAtTime(frequency, currentTime)
 
-  const destination = audioCtx.destination
-  oscillator.connect(destination)
+  oscillator.connect(gainNode)
 
   return oscillator
 }
@@ -43,3 +46,7 @@ function stopBeep() {
   morseOscillator.disconnect()
   morseOscillator = null
 }
+
+function setVolume(value) {
+  gainNode.gain.value = value / 100
+}

app/script/morse.min.js

@@ -29,6 +29,14 @@ function addSettingsListeners(morseEncoder, wordsPerMinute) {
     morseEncoder.setWordsPerMinute(wordsPerMinute)
     wordsPerMinuteValue.textContent = wordsPerMinute
   })
+
+  const volumeValue = document.querySelector(".volume .value")
+  const volumeInput = document.querySelector(".volume input")
+  volumeInput.addEventListener('input', (e) => {
+    const volume = parseInt(e.target.value)
+    setVolume(volume)
+    volumeValue.textContent = volume + '%'
+  })
 }
 
 function addSignalButtonListener(morseEncoder) {