add bpm input

assets/css/style.css

@@ -44,7 +44,7 @@ body {
 }
 .steps {
   display: grid;
-  grid-template-columns: repeat(16, 30px);
+  grid-template-columns: repeat(16, auto);
   gap: 5px;
 }
 

assets/js/main.js

@@ -16,7 +16,7 @@ const filter = new Tone.Filter({
 //bitcrusher effect
 const bitcrusher = new Tone.BitCrusher({
   bits: 8,
-  // wet: 0.5,
+  wet: 0.5,
 });
 
 // distortion effect
@@ -26,19 +26,20 @@ const distortion = new Tone.Distortion({
 });
 
 // Chain the effects together and connect them to the destination
-bitcrusher.chain(distortion, filter, Tone.Destination);
+// bitcrusher.chain(distortion, filter, Tone.Destination);
 
 //connect sound to filter
-kick.connect(bitcrusher);
-snare.connect(bitcrusher);
-hat.connect(bitcrusher);
-cymbal.connect(bitcrusher);
+kick.chain(bitcrusher, distortion, filter, Tone.Destination);
+snare.chain(bitcrusher, distortion, filter, Tone.Destination);
+hat.chain(bitcrusher, distortion, filter, Tone.Destination);
+cymbal.chain(bitcrusher, distortion, filter, Tone.Destination);
 
 const startBtn = document.getElementById("start-btn");
 const sequencer = document.getElementById("sequencer");
 const mainContentContainer = document.getElementById("main-content");
 const playBtn = document.getElementById("play-btn");
 const stopBtn = document.getElementById("stop-btn");
+const bpmInput = document.getElementById("bpm-input");
 
 const kickTrack = document.getElementById("kick-track");
 const snareTrack = document.getElementById("snare-track");
@@ -336,14 +337,14 @@ document.getElementById("filterSlider").addEventListener("input", (event) => {
 });
 
 // Bitcrusher slider
-document
-  .getElementById("bitcrusherSlider")
-  .addEventListener("input", (event) => {
-    const bits = event.target.value;
-    bitcrusher.bits = bits;
-    // const wet = event.target.value/100;
-    // bitcrusher.wet = wet;
-  });
+// document
+//   .getElementById("bitcrusherSlider")
+//   .addEventListener("input", (event) => {
+//     const bits = event.target.value;
+//     bitcrusher.bits = bits;
+//     // const wet = event.target.value/100;
+//     // bitcrusher.wet = wet;
+//   });
 
 // Distortion slider
 document
@@ -353,6 +354,13 @@ document
     distortion.distortion = distortionAmount;
   });
 
+
+// listen to bpm input changes
+bpmInput.addEventListener("input", (event) => {
+  const bpm = event.target.value;
+  Tone.Transport.bpm.value = bpm;
+});
+
 // Keyboard listener
 document.addEventListener("keydown", (event) => {
   if (event.code === 'Space') {

index.html

@@ -11,6 +11,10 @@
     <main id="main-content">
       <h1>QWRT-SEQ-01</h1>
       <div id="effect-container">
+        <div class="slider-container">
+          <label for='bpmInput'>BPM:</label>
+        <input type='number' id='bpm-input' min="10" max="240" value='120' />
+        </div>
         <div class="slider-container">
           <label for="filterSlider">Low Pass Filter Frequency:</label>
           <input
@@ -22,7 +26,7 @@ <h1>QWRT-SEQ-01</h1>
             value="5000"
           />
         </div>
-        <div class="slider-container">
+        <!-- <div class="slider-container">
           <label for="bitcrusherSlider">Bitcrusher Depth:</label>
           <input
             type="range"
@@ -32,7 +36,7 @@ <h1>QWRT-SEQ-01</h1>
             max="8"
             value="2"
           />
-        </div>
+        </div> -->
         <div class="slider-container">
           <label for="distortionSlider">Distortion:</label>
           <input