Create a virtual default audio output

Managing your audio output manually is kind of cumbersome; Chrome creates a default audio output for us, but now that audio outputs are enabled on Firefox as well, I find it necessary for a good user experience that there always be a way to set it to "whatever the default is".

src/settings/SettingsModal.tsx

@@ -93,11 +93,15 @@ export const SettingsModal: FC<Props> = ({
         <Form>
           <DeviceSelection
             devices={devices.audioInput}
-            caption={t("common.microphone")}
+            title={t("settings.devices.microphone")}
+            numberedLabel={(n) =>
+              t("settings.devices.microphone_numbered", { n })
+            }
           />
           <DeviceSelection
             devices={devices.audioOutput}
-            caption={t("settings.speaker_device_selection_label")}
+            title={t("settings.devices.speaker")}
+            numberedLabel={(n) => t("settings.devices.speaker_numbered", { n })}
           />
           <div className={styles.volumeSlider}>
             <label>{t("settings.audio_tab.effect_volume_label")}</label>
@@ -123,7 +127,8 @@ export const SettingsModal: FC<Props> = ({
       <Form>
         <DeviceSelection
           devices={devices.videoInput}
-          caption={t("common.camera")}
+          title={t("settings.devices.camera")}
+          numberedLabel={(n) => t("settings.devices.camera_numbered", { n })}
         />
       </Form>
     ),