add volume slider

index.html

@@ -26,6 +26,9 @@
 	<p>
 		<label>one in <input type="number" min="0" value="10" id="random-chance"> chance of playing every minute</label>
 	</p>
+	<p>
+		<label><input type="range" id="volume" min="0" max="100" value="100"> volume</label>
+	</p>
 </body>
 
 </html>

index.js

@@ -7,6 +7,7 @@
   const now = document.getElementById("play-now");
   const playAtRandom = document.getElementById("play-at-random");
   const randomChance = document.getElementById("random-chance");
+  const volume = document.getElementById("volume");
 
   playAtRandom.checked = false;
 
@@ -43,6 +44,13 @@
     pipe.addEventListener("click", play);
   }
 
+  volume.addEventListener("input", () => {
+    const v = volume.value / 100;
+    if (v >= 0 && v <= 1) {
+      pipefall.volume = v;
+    }
+  });
+
   function random(max) {
     return Math.floor(Math.random() * max);
   }
@@ -63,4 +71,5 @@
     }
   }, 1000);
   updateFalls();
+  pipefall.volume = volume.value / 100;
 })();