diff --git a/packages/design-system/src/icons/camera_off.svg b/packages/design-system/src/icons/camera_off.svg
new file mode 100644
index 000000000000..7af068bec99b
--- /dev/null
+++ b/packages/design-system/src/icons/camera_off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M7 40Q5.8 40 4.9 39.1Q4 38.2 4 37V11Q4 9.8 4.9 8.9Q5.8 8 7 8H33Q34.2 8 35.1 8.9Q36 9.8 36 11V21.75L44 13.75V34.25L36 26.25V37Q36 38.2 35.1 39.1Q34.2 40 33 40ZM7 37H33Q33 37 33 37Q33 37 33 37V11Q33 11 33 11Q33 11 33 11H7Q7 11 7 11Q7 11 7 11V37Q7 37 7 37Q7 37 7 37ZM7 37Q7 37 7 37Q7 37 7 37V11Q7 11 7 11Q7 11 7 11Q7 11 7 11Q7 11 7 11V37Q7 37 7 37Q7 37 7 37ZM41.55 45.25 1.8 5.5 3.7 3.6 43.45 43.35Z" fill="currentColor"/></svg>
diff --git a/packages/design-system/src/icons/index.js b/packages/design-system/src/icons/index.js
index 08e0b2fa6962..7a4f4dd7640f 100644
--- a/packages/design-system/src/icons/index.js
+++ b/packages/design-system/src/icons/index.js
@@ -48,6 +48,7 @@ export { default as Box4 } from './box4.svg';
 export { default as Box4Alternate } from './box4_alternate.svg';
 export { default as Bucket } from './bucket.svg';
 export { default as Camera } from './camera.svg';
+export { default as CameraOff } from './camera_off.svg';
 export { default as Captions } from './captions.svg';
 export { default as Checkbox } from './checkbox.svg';
 export { default as Checklist } from './checklist.svg';
diff --git a/packages/elements/src/types.js b/packages/elements/src/types.js
index 62e1b4a24499..d7748e066a6d 100644
--- a/packages/elements/src/types.js
+++ b/packages/elements/src/types.js
@@ -29,14 +29,17 @@ import { MULTIPLE_VALUE, BACKGROUND_TEXT_MODE, OverlayType } from './constants';
 
 const StoryPropTypes = {};
 
-export const BackgroundAudioPropType = PropTypes.shape({
+export const BackgroundAudioPropTypeShape = {
   id: PropTypes.number,
   src: PropTypes.string,
   length: PropTypes.number,
   lengthFormatted: PropTypes.string,
   mimeType: PropTypes.string,
   needsProxy: PropTypes.bool,
-});
+};
+export const BackgroundAudioPropType = PropTypes.shape(
+  BackgroundAudioPropTypeShape
+);
 
 StoryPropTypes.mask = PropTypes.shape({
   type: PropTypes.string.isRequired,
diff --git a/packages/story-editor/src/app/highlights/quickActions/useQuickActions.js b/packages/story-editor/src/app/highlights/quickActions/useQuickActions.js
index 5ca4bc40a86c..441398b05722 100644
--- a/packages/story-editor/src/app/highlights/quickActions/useQuickActions.js
+++ b/packages/story-editor/src/app/highlights/quickActions/useQuickActions.js
@@ -72,20 +72,15 @@ const {
   Settings,
 } = Icons;
 
-const StyledSettings = styled(Settings).attrs({
+const quickActionIconAttrs = {
   width: 24,
   height: 24,
-})``;
-
-const Mic = styled(Icons.Mic).attrs({
-  width: 24,
-  height: 24,
-})``;
-
-const MicOff = styled(Icons.MicOff).attrs({
-  width: 24,
-  height: 24,
-})``;
+};
+const StyledSettings = styled(Settings).attrs(quickActionIconAttrs)``;
+const Mic = styled(Icons.Mic).attrs(quickActionIconAttrs)``;
+const MicOff = styled(Icons.MicOff).attrs(quickActionIconAttrs)``;
+const Video = styled(Icons.Camera).attrs(quickActionIconAttrs)``;
+const VideoOff = styled(Icons.CameraOff).attrs(quickActionIconAttrs)``;
 
 export const MediaPicker = ({ render, ...props }) => {
   const {
@@ -302,20 +297,26 @@ const useQuickActions = () => {
   const {
     isInRecordingMode,
     toggleRecordingMode,
+    toggleVideo,
     toggleAudio,
+    hasVideo,
     hasAudio,
     toggleSettings,
     audioInput,
+    videoInput,
     isReady,
   } = useMediaRecording(({ state, actions }) => ({
     isInRecordingMode: state.isInRecordingMode,
     hasAudio: state.hasAudio,
+    hasVideo: state.hasVideo,
     audioInput: state.audioInput,
+    videoInput: state.videoInput,
     isReady:
       state.status === 'ready' &&
       !state.file?.type?.startsWith('image') &&
       !state.isCountingDown,
     toggleRecordingMode: actions.toggleRecordingMode,
+    toggleVideo: actions.toggleVideo,
     toggleAudio: actions.toggleAudio,
     toggleSettings: actions.toggleSettings,
     muteAudio: actions.muteAudio,
@@ -813,15 +814,32 @@ const useQuickActions = () => {
           });
           toggleAudio();
         },
-        disabled: !isReady,
+        disabled: !isReady || !hasVideo,
+        ...actionMenuProps,
+      },
+      videoInput && {
+        Icon: hasVideo ? Video : VideoOff,
+        label: hasVideo
+          ? __('Disable Video', 'web-stories')
+          : __('Enable Video', 'web-stories'),
+        onClick: () => {
+          trackEvent('media_recording_video_toggled', {
+            status: hasVideo ? 'off' : 'on',
+          });
+          toggleVideo();
+        },
+        disabled: !isReady || !hasAudio,
         ...actionMenuProps,
       },
     ].filter(Boolean);
   }, [
     actionMenuProps,
     audioInput,
+    videoInput,
+    hasVideo,
     hasAudio,
     toggleAudio,
+    toggleVideo,
     toggleRecordingMode,
     toggleSettings,
     isReady,
diff --git a/packages/story-editor/src/app/highlights/states.js b/packages/story-editor/src/app/highlights/states.js
index 9b1db9d7794d..f6157d71d403 100644
--- a/packages/story-editor/src/app/highlights/states.js
+++ b/packages/story-editor/src/app/highlights/states.js
@@ -58,6 +58,9 @@ const keys = {
   MEDIA3P: 'MEDIA3P',
   TEXT_SET: 'TEXT',
   PAGE_TEMPLATES: 'PAGE_TEMPLATES',
+
+  // DOCUMENT
+  BACKGROUND_AUDIO: 'BACKGROUND_AUDIO',
 };
 
 export const STATES = {
@@ -84,6 +87,10 @@ export const STATES = {
     focus: true,
     tab: DOCUMENT,
   },
+  [keys.BACKGROUND_AUDIO]: {
+    focus: true,
+    tab: DOCUMENT,
+  },
   [keys.CAPTIONS]: {
     focus: true,
     tab: STYLE,
diff --git a/packages/story-editor/src/app/media/useUploadMedia.js b/packages/story-editor/src/app/media/useUploadMedia.js
index 26bc6b9e5142..5f2d2fb9e599 100644
--- a/packages/story-editor/src/app/media/useUploadMedia.js
+++ b/packages/story-editor/src/app/media/useUploadMedia.js
@@ -278,7 +278,11 @@ function useUploadMedia({
           const isTooLarge = canTranscode && isFileTooLarge(file);
 
           try {
-            validateFileForUpload(file, canTranscode, isTooLarge);
+            validateFileForUpload({
+              file,
+              canTranscodeFile: canTranscode,
+              isFileTooLarge: isTooLarge,
+            });
           } catch (e) {
             showSnackbar({
               message: e.message,
diff --git a/packages/story-editor/src/app/media/utils/useFFmpeg.js b/packages/story-editor/src/app/media/utils/useFFmpeg.js
index 959b33bdaac2..8d37c68bc4de 100644
--- a/packages/story-editor/src/app/media/utils/useFFmpeg.js
+++ b/packages/story-editor/src/app/media/utils/useFFmpeg.js
@@ -457,6 +457,59 @@ function useFFmpeg() {
     [getFFmpegInstance]
   );
 
+  /**
+   * Converts any audio file format to MP3 using FFmpeg.
+   *
+   * @param {File} file Original audio file object.
+   * @return {Promise<File>} Converted video file object.
+   */
+  const convertToMp3 = useCallback(
+    async (file) => {
+      //eslint-disable-next-line @wordpress/no-unused-vars-before-return -- False positive because of the finally().
+      const trackTiming = getTimeTracker('load_mp3_conversion');
+
+      let ffmpeg;
+
+      try {
+        ffmpeg = await getFFmpegInstance(file);
+
+        const tempFileName = uuidv4() + '.mp3';
+        const outputFileName = getFileName(file) + '.mp3';
+
+        await ffmpeg.run(
+          // Input filename.
+          '-i',
+          file.name,
+          // Output filename. MUST be different from input filename.
+          tempFileName
+        );
+
+        const data = ffmpeg.FS('readFile', tempFileName);
+
+        return new blobToFile(
+          new Blob([data.buffer], { type: 'audio/mpeg' }),
+          outputFileName,
+          'audio/mpeg'
+        );
+      } catch (err) {
+        // eslint-disable-next-line no-console -- We want to surface this error.
+        console.error(err);
+
+        trackError('mp3_conversion', err.message);
+
+        throw err;
+      } finally {
+        try {
+          ffmpeg.exit();
+          // eslint-disable-next-line no-empty -- no-op
+        } catch (e) {}
+
+        trackTiming();
+      }
+    },
+    [getFFmpegInstance]
+  );
+
   /**
    * Determines whether the given file can be transcoded.
    *
@@ -496,6 +549,7 @@ function useFFmpeg() {
       stripAudioFromVideo,
       getFirstFrameOfVideo,
       convertGifToVideo,
+      convertToMp3,
       trimVideo,
     }),
     [
@@ -505,6 +559,7 @@ function useFFmpeg() {
       stripAudioFromVideo,
       getFirstFrameOfVideo,
       convertGifToVideo,
+      convertToMp3,
       trimVideo,
     ]
   );
diff --git a/packages/story-editor/src/app/uploader/test/useUploader.js b/packages/story-editor/src/app/uploader/test/useUploader.js
index 5fd81313af27..3eef6cf559fc 100644
--- a/packages/story-editor/src/app/uploader/test/useUploader.js
+++ b/packages/story-editor/src/app/uploader/test/useUploader.js
@@ -88,7 +88,7 @@ describe('useUploader', () => {
         },
       });
 
-      await expect(() => validateFileForUpload({})).toThrow(
+      await expect(() => validateFileForUpload({ file: {} })).toThrow(
         'Sorry, you are not allowed to upload files.'
       );
     });
@@ -100,7 +100,9 @@ describe('useUploader', () => {
         maxUpload: 2000000,
       });
 
-      await expect(() => validateFileForUpload({ size: 3000000 })).toThrow(
+      await expect(() =>
+        validateFileForUpload({ file: { size: 3000000 } })
+      ).toThrow(
         'Your file is 3MB and the upload limit is 2MB. Please resize and try again!'
       );
     });
@@ -111,23 +113,38 @@ describe('useUploader', () => {
       } = setup({});
 
       await expect(() =>
-        validateFileForUpload({ size: 20000, type: 'video/quicktime' })
+        validateFileForUpload({
+          file: { size: 20000, type: 'video/quicktime' },
+        })
       ).toThrow(
         'Please choose only png, jpg, jpeg, gif, webp, mp4, or webm to upload.'
       );
     });
 
+    it('throws an error if file type is not supported and in list of mime types', async () => {
+      const {
+        actions: { validateFileForUpload },
+      } = setup({});
+
+      await expect(() =>
+        validateFileForUpload({
+          file: { size: 20000, type: 'video/quicktime' },
+          overrideAllowedMimeTypes: ['video/mp4'],
+        })
+      ).toThrow('Please choose only mp4 to upload.');
+    });
+
     it('throws an error if file too large to transcode', async () => {
       const {
         actions: { validateFileForUpload },
       } = setup({});
 
       await expect(() =>
-        validateFileForUpload(
-          { size: 1024 * 1024 * 1024 * 2, type: 'video/mp4' },
-          true,
-          true
-        )
+        validateFileForUpload({
+          file: { size: 1024 * 1024 * 1024 * 2, type: 'video/mp4' },
+          canTranscodeFile: true,
+          isFileTooLarge: true,
+        })
       ).toThrow(
         'Your file is too large (2048 MB) and cannot be processed. Please try again with a file that is smaller than 2048 MB.'
       );
@@ -141,14 +158,11 @@ describe('useUploader', () => {
       });
 
       await expect(() =>
-        validateFileForUpload(
-          {
-            size: 1024 * 1024 * 1024 * 3,
-            type: 'video/quicktime',
-          },
-          true,
-          true
-        )
+        validateFileForUpload({
+          file: { size: 1024 * 1024 * 1024 * 3, type: 'video/quicktime' },
+          canTranscodeFile: true,
+          isFileTooLarge: true,
+        })
       ).toThrow(
         'Your file is too large (3072 MB) and cannot be processed. Please try again with a file that is smaller than 2048 MB.'
       );
@@ -160,11 +174,11 @@ describe('useUploader', () => {
       } = setup({});
 
       await expect(() =>
-        validateFileForUpload(
-          { size: 1024 * 1024 * 150, type: 'video/mp4' },
-          true,
-          false
-        )
+        validateFileForUpload({
+          file: { size: 1024 * 1024 * 150, type: 'video/mp4' },
+          canTranscodeFile: true,
+          isFileTooLarge: false,
+        })
       ).not.toThrow();
     });
 
@@ -174,11 +188,11 @@ describe('useUploader', () => {
       } = setup({});
 
       await expect(() =>
-        validateFileForUpload(
-          { size: 1024 * 1024 * 1024 * 2, type: 'video/mp4' },
-          false,
-          true
-        )
+        validateFileForUpload({
+          file: { size: 1024 * 1024 * 1024 * 2, type: 'video/mp4' },
+          canTranscodeFile: false,
+          isFileTooLarge: true,
+        })
       ).toThrow(
         'Your file is 2048MB and the upload limit is 100MB. Please resize and try again!'
       );
@@ -190,11 +204,11 @@ describe('useUploader', () => {
       } = setup({});
 
       await expect(() =>
-        validateFileForUpload(
-          { size: 1024 * 1024 * 50, type: 'video/mp4' },
-          false,
-          false
-        )
+        validateFileForUpload({
+          file: { size: 1024 * 1024 * 50, type: 'video/mp4' },
+          canTranscodeFile: false,
+          isFileTooLarge: false,
+        })
       ).not.toThrow();
     });
 
@@ -206,7 +220,9 @@ describe('useUploader', () => {
       });
 
       await expect(() =>
-        validateFileForUpload({ size: 20000, type: 'video/quicktime' })
+        validateFileForUpload({
+          file: { size: 20000, type: 'video/quicktime' },
+        })
       ).toThrow('Please choose only mp4 to upload.');
     });
 
@@ -216,7 +232,9 @@ describe('useUploader', () => {
       } = setup({ allowedMimeTypes: { image: [], video: [], vector: [] } });
 
       await expect(() =>
-        validateFileForUpload({ size: 20000, type: 'video/quicktime' })
+        validateFileForUpload({
+          file: { size: 20000, type: 'video/quicktime' },
+        })
       ).toThrow('No file types are currently supported.');
     });
   });
diff --git a/packages/story-editor/src/app/uploader/useUploader.js b/packages/story-editor/src/app/uploader/useUploader.js
index 74dfc0905cb6..69d7b6d1fd90 100644
--- a/packages/story-editor/src/app/uploader/useUploader.js
+++ b/packages/story-editor/src/app/uploader/useUploader.js
@@ -56,18 +56,6 @@ function useUploader() {
     ],
     [allowedImageMimeTypes, allowedVectorMimeTypes, allowedVideoMimeTypes]
   );
-  const allowedFileTypes = useMemo(
-    () =>
-      allowedMimeTypes.map((type) => getExtensionsFromMimeType(type)).flat(),
-    [allowedMimeTypes]
-  );
-
-  const isValidType = useCallback(
-    ({ type }) => {
-      return allowedMimeTypes.includes(type);
-    },
-    [allowedMimeTypes]
-  );
 
   const isFileSizeWithinLimits = useCallback(
     ({ size }) => {
@@ -80,12 +68,19 @@ function useUploader() {
    * Validates a file for upload.
    *
    * @throws Throws an error if file doesn't meet requirements.
-   * @param {Object} file File object.
-   * @param {boolean} canTranscodeFile Whether file can be transcoded by consumer.
-   * @param {boolean} isFileTooLarge Whether file is too large for consumer.
+   * @param {Object} args
+   * @param {Object} args.file File object.
+   * @param {boolean} args.canTranscodeFile Whether file can be transcoded by consumer.
+   * @param {boolean} args.isFileTooLarge Whether file is too large for consumer.
+   * @param {Array} args.overrideAllowedMimeTypes Array of override allowed mime types.
    */
   const validateFileForUpload = useCallback(
-    (file, canTranscodeFile, isFileTooLarge) => {
+    ({
+      file,
+      canTranscodeFile,
+      isFileTooLarge,
+      overrideAllowedMimeTypes = allowedMimeTypes,
+    }) => {
       // Bail early if user doesn't have upload capabilities.
       if (!hasUploadMediaAction) {
         const message = __(
@@ -110,6 +105,8 @@ function useUploader() {
           throw createError('SizeError', file.name, message);
         }
 
+        const isValidType = ({ type }) =>
+          overrideAllowedMimeTypes.includes(type);
         // TODO: Move this check to useUploadMedia?
         if (!isValidType(file)) {
           let message = __(
@@ -117,6 +114,10 @@ function useUploader() {
             'web-stories'
           );
 
+          const allowedFileTypes = overrideAllowedMimeTypes
+            .map((type) => getExtensionsFromMimeType(type))
+            .flat();
+
           if (allowedFileTypes.length) {
             /* translators: %s is a list of allowed file extensions. */
             message = sprintf(
@@ -142,13 +143,7 @@ function useUploader() {
         throw createError('SizeError', file.name, message);
       }
     },
-    [
-      hasUploadMediaAction,
-      isFileSizeWithinLimits,
-      maxUpload,
-      allowedFileTypes,
-      isValidType,
-    ]
+    [allowedMimeTypes, hasUploadMediaAction, isFileSizeWithinLimits, maxUpload]
   );
 
   /**
@@ -156,11 +151,16 @@ function useUploader() {
    *
    * @param {Object} file File object.
    * @param {Object} additionalData Additional Data object.
+   * @param {Array} overrideAllowedMimeTypes Array of override allowed mime types.
    */
   const uploadFile = useCallback(
-    (file, additionalData = {}) => {
+    (
+      file,
+      additionalData = {},
+      overrideAllowedMimeTypes = allowedMimeTypes
+    ) => {
       // This will throw if the file cannot be uploaded.
-      validateFileForUpload(file);
+      validateFileForUpload({ file, overrideAllowedMimeTypes });
 
       const _additionalData = {
         storyId,
@@ -171,7 +171,7 @@ function useUploader() {
 
       return uploadMedia(file, _additionalData);
     },
-    [validateFileForUpload, uploadMedia, storyId]
+    [allowedMimeTypes, validateFileForUpload, storyId, uploadMedia]
   );
 
   return useMemo(() => {
diff --git a/packages/story-editor/src/components/canvas/mediaRecordingLayer.js b/packages/story-editor/src/components/canvas/mediaRecordingLayer.js
index 5abd5c2df9c6..b2635db6cd7a 100644
--- a/packages/story-editor/src/components/canvas/mediaRecordingLayer.js
+++ b/packages/story-editor/src/components/canvas/mediaRecordingLayer.js
@@ -58,6 +58,7 @@ import {
   PHOTO_FILE_TYPE,
   VideoWrapper,
   Video,
+  Audio,
   Photo,
 } from '../mediaRecording';
 import { PageTitleArea } from './layout';
@@ -76,6 +77,7 @@ function MediaRecordingLayer() {
     getMediaStream,
     setFile,
     needsPermissions,
+    hasVideo,
     hasAudio,
     isGif,
     toggleIsGif,
@@ -89,6 +91,7 @@ function MediaRecordingLayer() {
     liveStream: state.liveStream,
     mediaBlob: state.mediaBlob,
     mediaBlobUrl: state.mediaBlobUrl,
+    hasVideo: state.hasVideo,
     hasAudio: state.hasAudio,
     isGif: state.isGif,
     needsPermissions:
@@ -160,7 +163,7 @@ function MediaRecordingLayer() {
     resetStream();
     getMediaStream();
     // eslint-disable-next-line react-hooks/exhaustive-deps -- Only want to act on actual input changes.
-  }, [audioInput, videoInput]);
+  }, [audioInput, videoInput, hasVideo]);
 
   useEffect(() => {
     if (isReady) {
@@ -202,26 +205,40 @@ function MediaRecordingLayer() {
             <Wrapper>
               {!isImageCapture && (
                 <>
-                  {mediaBlobUrl && (
+                  {mediaBlobUrl && hasVideo && (
                     <VideoMode value={!isGif} onChange={onToggleVideoMode} />
                   )}
                   <VideoWrapper>
-                    {mediaBlobUrl && (
-                      <>
-                        {/* eslint-disable-next-line jsx-a11y/media-has-caption -- We don't have tracks for this. */}
-                        <Video
-                          ref={videoRef}
-                          src={mediaBlobUrl}
-                          muted={isMuted}
-                          loop={isGif}
-                          tabIndex={0}
-                        />
-                        {!isGif && <PlayPauseButton videoRef={videoRef} />}
-                      </>
-                    )}
-                    {!mediaBlob && !mediaBlobUrl && liveStream && (
-                      <Video ref={streamRef} muted />
-                    )}
+                    {mediaBlobUrl &&
+                      (hasVideo ? (
+                        <>
+                          {/* eslint-disable-next-line jsx-a11y/media-has-caption -- We don't have tracks for this. */}
+                          <Video
+                            ref={videoRef}
+                            src={mediaBlobUrl}
+                            muted={isMuted}
+                            loop={isGif}
+                            tabIndex={0}
+                          />
+                          {!isGif && <PlayPauseButton videoRef={videoRef} />}
+                        </>
+                      ) : (
+                        <>
+                          {/* eslint-disable-next-line jsx-a11y/media-has-caption -- No captions wanted/needed here. */}
+                          <audio controls="controls" src={mediaBlobUrl} />
+                        </>
+                      ))}
+                    {!mediaBlob &&
+                      !mediaBlobUrl &&
+                      liveStream &&
+                      (hasVideo ? (
+                        <Video ref={streamRef} muted />
+                      ) : (
+                        <>
+                          {/* eslint-disable-next-line jsx-a11y/media-has-caption -- No an actual <audio> tag. */}
+                          <Audio liveStream={liveStream} />
+                        </>
+                      ))}
                   </VideoWrapper>
                 </>
               )}
diff --git a/packages/story-editor/src/components/library/panes/media/local/mediaRecording/mediaRecording.js b/packages/story-editor/src/components/library/panes/media/local/mediaRecording/mediaRecording.js
index 506269034b6e..c02c9b98add6 100644
--- a/packages/story-editor/src/components/library/panes/media/local/mediaRecording/mediaRecording.js
+++ b/packages/story-editor/src/components/library/panes/media/local/mediaRecording/mediaRecording.js
@@ -78,7 +78,7 @@ function MediaRecording() {
     return null;
   }
 
-  const label = __('Record Video', 'web-stories');
+  const label = __('Record Video/Audio', 'web-stories');
   return (
     <Tooltip title={label}>
       <Button
diff --git a/packages/story-editor/src/components/mediaRecording/audio.js b/packages/story-editor/src/components/mediaRecording/audio.js
new file mode 100644
index 000000000000..1b84b30437a3
--- /dev/null
+++ b/packages/story-editor/src/components/mediaRecording/audio.js
@@ -0,0 +1,117 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import { useEffect, useRef, useState } from '@googleforcreators/react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const AudioWrapper = styled.div`
+  background: ${({ theme }) => theme.colors.bg.secondary};
+  border-radius: 5px;
+  width: 100%;
+  height: 100%;
+`;
+
+export const Audio = ({ liveStream }) => (
+  <AudioWrapper>
+    <AudioAnalyser source={liveStream} />
+  </AudioWrapper>
+);
+
+Audio.propTypes = {
+  liveStream: PropTypes.object,
+};
+
+const AudioAnalyser = ({ source }) => {
+  const [data, setData] = useState([]);
+  const raf = useRef();
+  const audioContextRef = useRef();
+  const analyserRef = useRef();
+  const prevRafTime = useRef();
+
+  if (!analyserRef.current) {
+    audioContextRef.current = new window.AudioContext();
+    analyserRef.current = audioContextRef.current.createAnalyser();
+  }
+
+  useEffect(() => {
+    const audioNode = audioContextRef.current.createMediaStreamSource(source);
+    audioNode.connect(analyserRef.current);
+
+    const tick = (time) => {
+      if (prevRafTime.current !== undefined) {
+        const dataArray = new Uint8Array(analyserRef.current.frequencyBinCount);
+        analyserRef.current.getByteTimeDomainData(dataArray);
+        setData(dataArray);
+      }
+      prevRafTime.current = time;
+      raf.current = requestAnimationFrame(tick);
+    };
+
+    raf.current = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(raf.current);
+      analyserRef.current.disconnect();
+      audioNode.disconnect();
+    };
+  }, [source]);
+
+  return <AudioVisualiser data={data} />;
+};
+
+AudioAnalyser.propTypes = {
+  source: PropTypes.object,
+};
+
+const AudioVisualiser = ({ data }) => {
+  const ref = useRef();
+  const canvas = ref.current;
+  if (canvas) {
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+    canvas.width = canvas.offsetWidth;
+    canvas.height = canvas.offsetHeight;
+
+    const height = canvas.height;
+    const width = canvas.width;
+    const context = canvas.getContext('2d');
+    const sliceWidth = Number(width) / data.length;
+
+    context.lineWidth = 2;
+    context.strokeStyle = '#FFF';
+    context.clearRect(0, 0, width, height);
+
+    context.beginPath();
+    context.moveTo(0, height / 2);
+    let x = 0;
+    for (const item of data) {
+      const y = (item / 255.0) * height;
+      context.lineTo(x, y);
+      x += sliceWidth;
+    }
+    context.lineTo(x, height / 2);
+    context.stroke();
+  }
+
+  return <canvas ref={ref} />;
+};
+
+AudioVisualiser.propTypes = {
+  data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+};
diff --git a/packages/story-editor/src/components/mediaRecording/constants.js b/packages/story-editor/src/components/mediaRecording/constants.js
index 0e76623ecb1a..8e95efbe0902 100644
--- a/packages/story-editor/src/components/mediaRecording/constants.js
+++ b/packages/story-editor/src/components/mediaRecording/constants.js
@@ -21,5 +21,8 @@ export const COUNTDOWN_TIME_IN_SECONDS = 3;
 export const VIDEO_MIME_TYPE = 'video/mp4';
 export const VIDEO_FILE_TYPE = 'mp4';
 
+export const AUDIO_MIME_TYPE = 'audio/mpeg';
+export const AUDIO_FILE_TYPE = 'mp3';
+
 export const PHOTO_MIME_TYPE = 'image/jpeg';
 export const PHOTO_FILE_TYPE = 'jpeg';
diff --git a/packages/story-editor/src/components/mediaRecording/footer.js b/packages/story-editor/src/components/mediaRecording/footer.js
index 7b2d0cd06f99..34897dc8e9b3 100644
--- a/packages/story-editor/src/components/mediaRecording/footer.js
+++ b/packages/story-editor/src/components/mediaRecording/footer.js
@@ -41,12 +41,19 @@ import {
 /**
  * Internal dependencies
  */
+import { BackgroundAudioPropTypeShape } from '@googleforcreators/elements';
 import getResourceFromLocalFile from '../../app/media/utils/getResourceFromLocalFile';
 import { Z_INDEX_RECORDING_MODE } from '../../constants/zIndex';
 import { FooterArea } from '../canvas/layout';
 import useUploadWithPreview from '../canvas/useUploadWithPreview';
-import useMediaRecording from './useMediaRecording';
+import { useUploader } from '../../app/uploader';
+import { useConfig, useStory } from '../../app';
+import useHighlights from '../../app/highlights/useHighlights';
+import states from '../../app/highlights/states';
+import useFFmpeg from '../../app/media/utils/useFFmpeg';
+import objectPick from '../../utils/objectPick';
 import { COUNTDOWN_TIME_IN_SECONDS } from './constants';
+import useMediaRecording from './useMediaRecording';
 
 const StyledFooter = styled(FooterArea)`
   display: flex;
@@ -132,6 +139,7 @@ function Footer({ captureImage, videoRef }) {
     toggleRecordingMode,
     getMediaStream,
     resetState,
+    hasVideo,
   } = useMediaRecording(({ state, actions }) => ({
     status: state.status,
     file: state.file,
@@ -140,6 +148,7 @@ function Footer({ captureImage, videoRef }) {
     countdown: state.countdown,
     duration: state.duration,
     isCountingDown: state.isCountingDown,
+    hasVideo: state.hasVideo,
     hasMediaToInsert: Boolean(state.mediaBlobUrl),
     startRecording: actions.startRecording,
     stopRecording: actions.stopRecording,
@@ -156,6 +165,10 @@ function Footer({ captureImage, videoRef }) {
 
   const speak = useLiveRegion();
 
+  const {
+    allowedMimeTypes: { audio: allowedAudioMimeTypes },
+  } = useConfig();
+
   const onRetry = useCallback(async () => {
     resetState();
     await getMediaStream();
@@ -276,6 +289,46 @@ function Footer({ captureImage, videoRef }) {
     speak,
   ]);
 
+  const {
+    actions: { uploadFile },
+  } = useUploader();
+
+  const { updateStory } = useStory(({ actions: { updateStory } }) => ({
+    updateStory,
+  }));
+  const { setHighlights } = useHighlights(({ setHighlights }) => ({
+    setHighlights,
+  }));
+
+  const { convertToMp3 } = useFFmpeg();
+
+  const onAudioInsert = async () => {
+    setIsInserting(true);
+    speak(__('Inserting…', 'web-stories'));
+
+    const mp3File = await convertToMp3(file);
+    const resource = await uploadFile(
+      mp3File,
+      {
+        mediaSource: 'recording',
+      },
+      allowedAudioMimeTypes
+    );
+    const backgroundAudio = {
+      resource: objectPick(resource, Object.keys(BackgroundAudioPropTypeShape)),
+    };
+
+    setHighlights({
+      highlight: states.BACKGROUND_AUDIO,
+    });
+
+    updateStory({
+      properties: { backgroundAudio },
+    });
+    setIsInserting(false);
+    toggleRecordingMode();
+  };
+
   if ('acquiring_media' === status) {
     return null;
   }
@@ -287,10 +340,15 @@ function Footer({ captureImage, videoRef }) {
           <RetryButton onClick={onRetry} disabled={isInserting}>
             {__('Retry', 'web-stories')}
           </RetryButton>
-          <InsertButton onClick={onInsert} disabled={isInserting}>
+          <InsertButton
+            onClick={hasVideo ? onInsert : onAudioInsert}
+            disabled={isInserting}
+          >
             {isInserting
               ? __('Inserting…', 'web-stories')
-              : __('Insert', 'web-stories')}
+              : hasVideo
+              ? __('Insert', 'web-stories')
+              : __('Insert background audio', 'web-stories')}
           </InsertButton>
         </>
       )}
@@ -301,18 +359,25 @@ function Footer({ captureImage, videoRef }) {
               {__('Stop Recording', 'web-stories')}
             </StopButton>
           )}
-          {!isRecording && !isCountingDown && (
-            <>
+          {!isRecording &&
+            !isCountingDown &&
+            (hasVideo ? (
+              <>
+                <RecordingButton onClick={onStart}>
+                  <Icons.Camera width={24} height={24} aria-hidden />
+                  {__('Record Video', 'web-stories')}
+                </RecordingButton>
+                <CaptureButton onClick={onCapture}>
+                  <Icons.PhotoCamera width={24} height={24} aria-hidden />
+                  {__('Take a photo', 'web-stories')}
+                </CaptureButton>
+              </>
+            ) : (
               <RecordingButton onClick={onStart}>
-                <Icons.Camera width={24} height={24} aria-hidden />
-                {__('Record Video', 'web-stories')}
+                <Icons.Mic width={24} height={24} aria-hidden />
+                {__('Record Audio', 'web-stories')}
               </RecordingButton>
-              <CaptureButton onClick={onCapture}>
-                <Icons.PhotoCamera width={24} height={24} aria-hidden />
-                {__('Take a photo', 'web-stories')}
-              </CaptureButton>
-            </>
-          )}
+            ))}
         </>
       )}
     </StyledFooter>
diff --git a/packages/story-editor/src/components/mediaRecording/index.js b/packages/story-editor/src/components/mediaRecording/index.js
index ce0255426cbb..72bf794e8ceb 100644
--- a/packages/story-editor/src/components/mediaRecording/index.js
+++ b/packages/story-editor/src/components/mediaRecording/index.js
@@ -29,6 +29,7 @@ export { default as Countdown } from './countdown';
 export { default as DurationIndicator } from './durationIndicator';
 export { default as PlayPauseButton } from './playPauseButton';
 export * from './constants';
+export * from './audio';
 export {
   LayerWithGrayout,
   DisplayPageArea,
diff --git a/packages/story-editor/src/components/mediaRecording/karma/mediaRecording.karma.js b/packages/story-editor/src/components/mediaRecording/karma/mediaRecording.karma.js
index f532f4f7f8d3..ed86ad953d7b 100644
--- a/packages/story-editor/src/components/mediaRecording/karma/mediaRecording.karma.js
+++ b/packages/story-editor/src/components/mediaRecording/karma/mediaRecording.karma.js
@@ -93,7 +93,7 @@ describe('Media Recording', () => {
     fixture.restore();
   });
 
-  describe('Creator can self-record using their webcam', () => {
+  describe('Creator can self-record video using their webcam', () => {
     it('should toggle media recording layer via library and quick actions', async () => {
       // Open media recording.
       await fixture.events.click(fixture.editor.library.media.mediaRecording);
@@ -224,4 +224,24 @@ describe('Media Recording', () => {
       ).not.toBeNull();
     });
   });
+
+  describe('Creator can self-record audio using their webcam or microphone', () => {
+    it('should change media recording type to audio via disable video button', async () => {
+      // Open media recording.
+      await fixture.events.click(fixture.editor.library.media.mediaRecording);
+
+      expect(
+        fixture.editor.canvas.mediaRecordingLayer.recordVideo
+      ).not.toBeNull();
+
+      // Disable video.
+      await fixture.events.click(
+        fixture.editor.canvas.quickActionMenu.disableVideoButton
+      );
+
+      expect(
+        fixture.editor.canvas.mediaRecordingLayer.recordAudio
+      ).not.toBeNull();
+    });
+  });
 });
diff --git a/packages/story-editor/src/components/mediaRecording/provider.js b/packages/story-editor/src/components/mediaRecording/provider.js
index 20e06b067ba4..04c230c26091 100644
--- a/packages/story-editor/src/components/mediaRecording/provider.js
+++ b/packages/story-editor/src/components/mediaRecording/provider.js
@@ -45,6 +45,8 @@ import {
   MAX_RECORDING_DURATION_IN_SECONDS,
   VIDEO_FILE_TYPE,
   VIDEO_MIME_TYPE,
+  AUDIO_FILE_TYPE,
+  AUDIO_MIME_TYPE,
 } from './constants';
 
 function MediaRecordingProvider({ children }) {
@@ -56,6 +58,7 @@ function MediaRecordingProvider({ children }) {
 
   const [isGif, setIsGif] = useState(false);
 
+  const [hasVideo, setHasVideo] = useState(true);
   const [hasAudio, setHasAudio] = useState(true);
   const [videoInput, setVideoInput] = useState(
     localStore.getItemByKey(LOCAL_STORAGE_PREFIX.MEDIA_RECORDING_VIDEO_INPUT)
@@ -104,14 +107,20 @@ function MediaRecordingProvider({ children }) {
           dismissable: true,
         });
       }
+      const FILE_TYPE = hasVideo ? VIDEO_FILE_TYPE : AUDIO_FILE_TYPE;
+      const MIME_TYPE = hasVideo ? VIDEO_MIME_TYPE : AUDIO_MIME_TYPE;
+      const captureType = hasVideo ? 'webcam' : 'audio';
       const f = blobToFile(
         blob,
-        `webcam-capture-${format(new Date(), 'Y-m-d-H-i')}.${VIDEO_FILE_TYPE}`,
-        VIDEO_MIME_TYPE
+        `${captureType}-capture-${format(
+          new Date(),
+          'Y-m-d-H-i'
+        )}.${FILE_TYPE}`,
+        MIME_TYPE
       );
       setFile(f);
     },
-    [showSnackbar]
+    [showSnackbar, hasVideo]
   );
 
   const {
@@ -135,7 +144,7 @@ function MediaRecordingProvider({ children }) {
     // TODO: Figure out how to retry without microphone if possible.
     mediaStreamConstraints: {
       audio: audioInput && hasAudio ? { deviceId: audioInput } : true,
-      video: videoInput ? { deviceId: videoInput } : true,
+      video: videoInput && hasVideo ? { deviceId: videoInput } : true,
     },
     onStop,
   });
@@ -187,6 +196,10 @@ function MediaRecordingProvider({ children }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps -- We only want to run it once.
   }, []);
 
+  const toggleVideo = useCallback(() => {
+    setHasVideo(!hasVideo);
+  }, [hasVideo]);
+
   const toggleAudio = useCallback(() => {
     setHasAudio(!hasAudio);
     if (hasAudio) {
@@ -272,6 +285,7 @@ function MediaRecordingProvider({ children }) {
     () => ({
       state: {
         isInRecordingMode,
+        hasVideo,
         hasAudio,
         mediaDevices,
         audioInput,
@@ -291,6 +305,7 @@ function MediaRecordingProvider({ children }) {
       actions: {
         toggleRecordingMode,
         setMediaBlobUrl,
+        toggleVideo,
         toggleAudio,
         toggleSettings,
         toggleIsGif,
@@ -313,6 +328,7 @@ function MediaRecordingProvider({ children }) {
     }),
     [
       isInRecordingMode,
+      hasVideo,
       hasAudio,
       mediaDevices,
       audioInput,
@@ -330,6 +346,7 @@ function MediaRecordingProvider({ children }) {
       isCountingDown,
       wasCountingDown,
       toggleRecordingMode,
+      toggleVideo,
       toggleAudio,
       toggleSettings,
       toggleIsGif,
diff --git a/packages/story-editor/src/components/panels/document/backgroundAudio/backgroundAudio.js b/packages/story-editor/src/components/panels/document/backgroundAudio/backgroundAudio.js
index b8da8352f7c4..a1a00fdf3883 100644
--- a/packages/story-editor/src/components/panels/document/backgroundAudio/backgroundAudio.js
+++ b/packages/story-editor/src/components/panels/document/backgroundAudio/backgroundAudio.js
@@ -31,6 +31,9 @@ import { useConfig } from '../../../../app';
 import { Row } from '../../../form';
 import { SimplePanel } from '../../panel';
 import BackgroundAudioPanelContent from '../../shared/media/backgroundAudioPanelContent';
+import useHighlights from '../../../../app/highlights/useHighlights';
+import states from '../../../../app/highlights/states';
+import { styles } from '../../../../app/highlights';
 
 const HelperText = styled(Text).attrs({
   size: THEME_CONSTANTS.TYPOGRAPHY.PRESET_SIZES.SMALL,
@@ -38,6 +41,22 @@ const HelperText = styled(Text).attrs({
   color: ${({ theme }) => theme.colors.fg.secondary};
 `;
 
+const HighlightRow = styled(Row).attrs({
+  spaceBetween: false,
+})`
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    top: -10px;
+    bottom: -10px;
+    left: -20px;
+    right: -10px;
+    ${({ isHighlighted }) => isHighlighted && styles.FLASH}
+    pointer-events: none;
+  }
+`;
+
 function BackgroundAudioPanel({ nameOverride }) {
   const {
     capabilities: { hasUploadMediaAction },
@@ -52,6 +71,13 @@ function BackgroundAudioPanel({ nameOverride }) {
     }) => ({ backgroundAudio, updateStory })
   );
 
+  const { highlightBackgroundAudio, resetHighlight } = useHighlights(
+    (state) => ({
+      highlightBackgroundAudio: state[states.BACKGROUND_AUDIO],
+      resetHighlight: state.onFocusOut,
+    })
+  );
+
   const updateBackgroundAudio = useCallback(
     (updatedBackgroundAudio) => {
       updateStory({
@@ -70,6 +96,7 @@ function BackgroundAudioPanel({ nameOverride }) {
       name={nameOverride || 'backgroundAudio'}
       title={__('Background Audio', 'web-stories')}
       collapsedByDefault
+      isPersistable={!highlightBackgroundAudio}
     >
       <Row>
         <HelperText>
@@ -79,10 +106,15 @@ function BackgroundAudioPanel({ nameOverride }) {
           )}
         </HelperText>
       </Row>
-      <BackgroundAudioPanelContent
-        backgroundAudio={backgroundAudio}
-        updateBackgroundAudio={updateBackgroundAudio}
-      />
+      <HighlightRow
+        isHighlighted={highlightBackgroundAudio?.showEffect}
+        onAnimationEnd={() => resetHighlight()}
+      >
+        <BackgroundAudioPanelContent
+          backgroundAudio={backgroundAudio}
+          updateBackgroundAudio={updateBackgroundAudio}
+        />
+      </HighlightRow>
     </SimplePanel>
   );
 }
diff --git a/packages/story-editor/src/karma/fixture/containers/canvas.js b/packages/story-editor/src/karma/fixture/containers/canvas.js
index 597f8faab4ed..8a63e95b17c2 100644
--- a/packages/story-editor/src/karma/fixture/containers/canvas.js
+++ b/packages/story-editor/src/karma/fixture/containers/canvas.js
@@ -261,6 +261,10 @@ class MediaRecordingLayer extends Container {
     return this.getByRole('button', { name: 'Record Video' });
   }
 
+  get recordAudio() {
+    return this.getByRole('button', { name: 'Record Audio' });
+  }
+
   get takePhoto() {
     return this.getByRole('button', { name: 'Take a photo' });
   }
diff --git a/packages/story-editor/src/karma/fixture/containers/library/index.js b/packages/story-editor/src/karma/fixture/containers/library/index.js
index e13911a57c47..8f6d7fc02e80 100644
--- a/packages/story-editor/src/karma/fixture/containers/library/index.js
+++ b/packages/story-editor/src/karma/fixture/containers/library/index.js
@@ -117,7 +117,7 @@ export class Media extends Container {
 
   get mediaRecording() {
     return this.getByRole('button', {
-      name: 'Record Video',
+      name: 'Record Video/Audio',
     });
   }
 
diff --git a/packages/story-editor/src/karma/fixture/containers/quickActionMenu.js b/packages/story-editor/src/karma/fixture/containers/quickActionMenu.js
index c7bc5b03c65a..448d30d574ea 100644
--- a/packages/story-editor/src/karma/fixture/containers/quickActionMenu.js
+++ b/packages/story-editor/src/karma/fixture/containers/quickActionMenu.js
@@ -114,6 +114,12 @@ export class QuickActionMenu extends Container {
     });
   }
 
+  get disableVideoButton() {
+    return this.queryByRole('menuitem', {
+      name: 'Disable Video',
+    });
+  }
+
   get enableAudioButton() {
     return this.queryByRole('menuitem', {
       name: 'Enable Audio',