[Recorder] Add backstops for if cursor departs button (#3077)

src/components/Pronunciations/AudioRecorder.tsx

@@ -25,11 +25,19 @@ export default function AudioRecorder(props: RecorderProps): ReactElement {
   const recorder = useContext(RecorderContext);
   const { t } = useTranslation();
 
-  function startRecording(): void {
+  async function startRecording(): Promise<void> {
+    // Prevent starting a recording before a previous one is finished.
+    await stopRecording();
+
     recorder.startRecording();
   }
 
   async function stopRecording(): Promise<void> {
+    // Prevent triggering this function if no recording is active.
+    if (!recorder.isRecording()) {
+      return;
+    }
+
     if (props.onClick) {
       props.onClick();
     }

src/components/Pronunciations/Recorder.ts

@@ -14,6 +14,10 @@ export default class Recorder {
       .catch((err) => this.onError(err));
   }
 
+  isRecording(): boolean {
+    return this.recordRTC?.getState() === "recording";
+  }
+
   startRecording(): void {
     this.recordRTC?.reset();
     this.recordRTC?.startRecording();

src/components/Pronunciations/RecorderIcon.tsx

@@ -68,6 +68,7 @@ export default function RecorderIcon(props: RecorderIconProps): ReactElement {
         aria-label="record"
         disabled={props.disabled}
         id={recordButtonId}
+        onBlur={toggleIsRecordingToFalse}
         onPointerDown={toggleIsRecordingToTrue}
         onPointerUp={toggleIsRecordingToFalse}
         onTouchEnd={handleTouchEnd}