Added BPM control

- This new control adjusts the Tone.Transport BPM
- Allowing for the arpeggiator's base timing to be adjusted

index.html

@@ -183,28 +183,43 @@
  </div>
  </div>
  <div class="w-[250px] flex justify-end">
- <div class="border border-gray-700 rounded-xl p-1 w-min flex flex-col">
- <div class="border border-gray-600 rounded-xl p-1 w-min flex flex-col">
- <div class="border border-gray-500 rounded-xl p-1 w-min flex flex-col">
- <p id="master_gain_label" class="text-center">Master</p>
- <webaudio-knob
- id="master_gain"
- class="control masterControl self-center"
- colors="#FFFFFF;#2C292D;#D9D9D9"
- diameter="40"
- min="0"
- max="2"
- value="1"
- step="0.01"
- ></webaudio-knob>
- <webaudio-param
- id="master_gain_readout"
- link="master_gain"
- fontSize="14"
- class="self-center border border-gray-500 mt-1"
- ></webaudio-param>
- </div>
- </div>
+ <div class="border border-gray-500 rounded-xl p-1 w-min flex flex-col mr-1">
+ <p id="master_bpm_label" class="text-center">BPM</p>
+ <webaudio-knob
+ id="master_bpm"
+ class="control masterControl self-center"
+ colors="#FFFFFF;#2C292D;#D9D9D9"
+ diameter="40"
+ min="1"
+ max="600"
+ value="120"
+ step="1"
+ ></webaudio-knob>
+ <webaudio-param
+ id="master_bpm_readout"
+ link="master_bpm"
+ fontSize="14"
+ class="self-center border border-gray-500 mt-1"
+ ></webaudio-param>
+ </div>
+ <div class="border border-gray-500 rounded-xl p-1 w-min flex flex-col">
+ <p id="master_gain_label" class="text-center">Master</p>
+ <webaudio-knob
+ id="master_gain"
+ class="control masterControl self-center"
+ colors="#FFFFFF;#2C292D;#D9D9D9"
+ diameter="40"
+ min="0"
+ max="2"
+ value="1"
+ step="0.01"
+ ></webaudio-knob>
+ <webaudio-param
+ id="master_gain_readout"
+ link="master_gain"
+ fontSize="14"
+ class="self-center border border-gray-500 mt-1"
+ ></webaudio-param>
  </div>
  </div>
  </div>

src/synth.js

@@ -73,6 +73,7 @@ let PRESET = {
  MASTER: {
  gain: 1,
  octaveOffset: 0,
+ bpm: 120,
  },
  OSC_A: {
  enabled: 1,
@@ -2293,6 +2294,10 @@ for (let i = 0; i < controls.length; i++) {
  "gain": e.target.value
  })
  break;
+ case "master_bpm":
+ PRESET.MASTER.bpm = e.target.value
+ Tone.Transport.bpm.value = e.target.value
+ break;
  // -------------------- //
  // --- OSCILLATOR A --- //
  // -------------------- //