Allow recording over a track

roadmap.md

@@ -52,7 +52,7 @@ A `Track` is a single mono or stereo audio buffer that contains audio data. A `T
 - [x] Component can remove itself from scene https://github.com/ericyd/loop-supreme/pull/5
 - [x] Component has arm toggle button https://github.com/ericyd/loop-supreme/pull/8
 - [x] ~audio data can be cleared from component without deleting it (to preserve track name)~ just mute, and then re-record if desired
-- [ ] `regression` allow re-recording audio over a track [regression introduced here](https://github.com/ericyd/loop-supreme/pull/27)
+- [x] `regression` allow re-recording audio over a track [regression introduced here](https://github.com/ericyd/loop-supreme/pull/27) https://github.com/ericyd/loop-supreme/pull/34
 - [x] deleting a track stops playback https://github.com/ericyd/loop-supreme/pull/13
 - [x] Component can record data from user device https://github.com/ericyd/loop-supreme/pull/8
 - [x] Component shows waveform of recorded audio https://github.com/ericyd/loop-supreme/pull/20

src/Metronome/controls/TempoControl.tsx

@@ -36,7 +36,7 @@ export function TempoControl({ onChange, defaultValue }: TempoProps) {
     } else {
       setTaps((taps) => [...taps, now])
     }
-    if (taps.length > 2) {
+    if (taps.length >= 2) {
       const averageMs = averageBetween(taps.slice(-3))
       const bpm = 60 / (averageMs / 1000)
       debouncedOnChange(bpm)

src/Track/index.tsx

@@ -154,8 +154,8 @@ export const Track: React.FC<Props> = ({
   /**
    * Both of these are instantiated on mount
    */
-  const recorderWorklet = useRef<AudioWorkletNode>()
-  const bufferSource = useRef<AudioBufferSourceNode>()
+  const recorderWorklet = useRef<AudioWorkletNode | null>(null)
+  const bufferSource = useRef<AudioBufferSourceNode | null>(null)
 
   /**
    * Builds a callback that handles the messages from the recorder worker.
@@ -271,7 +271,7 @@ export const Track: React.FC<Props> = ({
       if (recorderWorklet.current) {
         recorderWorklet.current.disconnect()
         recorderWorklet.current.port.onmessage = null
-        recorderWorklet.current = undefined
+        recorderWorklet.current = null
       }
       bufferSource.current?.stop()
       mediaSource.disconnect()
@@ -290,9 +290,11 @@ export const Track: React.FC<Props> = ({
     if (armed) {
       setRecording(true)
       setArmed(false)
+      bufferSource.current = null
       recorderWorklet.current?.port?.postMessage({
         message: 'UPDATE_RECORDING_STATE',
         recording: true,
+        reset: true,
       })
       waveformWorker.postMessage({
         message: 'RESET_FRAMES',

src/workers/recorder.js

@@ -87,6 +87,14 @@ class RecordingProcessor extends AudioWorkletProcessor {
     this.port.onmessage = (event) => {
       if (event.data.message === 'UPDATE_RECORDING_STATE') {
         this.recording = event.data.recording
+        if (event.data.reset) {
+          this.channelsData = new Array(this.numberOfChannels).fill(
+            new Float32Array(this.maxRecordingSamples)
+          )
+          this.recordedSamples = 0
+          this.samplesSinceLastPublish = 0
+          this.gainSum = 0
+        }
 
         // When the recording ends, send the buffer back to the Track
         if (this.recording === false) {