diff --git a/packages/web-shared/components/ContentSingle.js b/packages/web-shared/components/ContentSingle.js
index 8b2d359e..68585cc7 100644
--- a/packages/web-shared/components/ContentSingle.js
+++ b/packages/web-shared/components/ContentSingle.js
@@ -135,11 +135,12 @@ function ContentSingle(props = {}) {
   const invalidPage = !props.loading && !props.data;
 
   // Video details
-  const videoMedia = props.data?.videos?.[0];
+  const playableMedia = props.data?.videos?.[0] || props.data?.audios?.[0];
+  const shouldLoadMediaProgress = playableMedia?.__typename === 'VideoMedia';
 
   const { userProgress } = useVideoMediaProgress({
-    variables: { id: videoMedia?.id },
-    skip: !videoMedia?.id,
+    variables: { id: playableMedia?.id },
+    skip: !shouldLoadMediaProgress || !playableMedia?.id,
   });
 
   useEffect(() => {
@@ -273,9 +274,9 @@ function ContentSingle(props = {}) {
               title: props.data?.title,
             }}
           />
-          {coverImage?.sources[0]?.uri || videoMedia ? (
+          {coverImage?.sources[0]?.uri || playableMedia ? (
             <Box mb="base" borderRadius="xl" overflow="hidden" width="100%">
-              {videoMedia ? (
+              {playableMedia ? (
                 <VideoPlayer
                   userProgress={userProgress}
                   parentNode={props.data}
diff --git a/packages/web-shared/components/VideoPlayer/VideoPlayer.js b/packages/web-shared/components/VideoPlayer/VideoPlayer.js
index 721b2a16..2dca29db 100644
--- a/packages/web-shared/components/VideoPlayer/VideoPlayer.js
+++ b/packages/web-shared/components/VideoPlayer/VideoPlayer.js
@@ -35,17 +35,21 @@ function VideoPlayer(props = {}) {
   const [progressTime, setProgressTime] = useState(0);
   const [paused, setPaused] = useState(false);
 
-  const hasSource = (video) => video.sources?.some((source) => source?.uri);
+  const mediaItems = props.parentNode?.videos?.length
+    ? props.parentNode.videos
+    : props.parentNode?.audios || [];
+  const hasSource = (media) => media.sources?.some((source) => source?.uri);
 
   // will find the first HLS video playlist provided
-  const hlsMedia = props.parentNode?.videos?.find((video) =>
-    video.sources?.some((source) => source?.uri?.includes('.m3u8'))
+  const hlsMedia = mediaItems.find((media) =>
+    media.sources?.some((source) => source?.uri?.includes('.m3u8'))
   );
-  const youtubeMedia = props.parentNode?.videos?.find((video) =>
-    video.sources?.some((source) => source?.uri?.includes('youtu'))
+  const youtubeMedia = mediaItems.find((media) =>
+    media.sources?.some((source) => source?.uri?.includes('youtu'))
   );
-  const fallbackMedia = props.parentNode?.videos?.find(hasSource);
-  const videoMedia = youtubeMedia || hlsMedia || fallbackMedia;
+  const fallbackMedia = mediaItems.find(hasSource);
+  const playableMedia = youtubeMedia || hlsMedia || fallbackMedia;
+  const shouldTrackProgress = playableMedia?.__typename === 'VideoMedia';
 
   const userProgress = props.userProgress || { playhead: 0, complete: false };
 
@@ -59,10 +63,10 @@ function VideoPlayer(props = {}) {
       }
       previouslyReportedPlayhead.current = data?.progress;
 
-      if (videoMedia.id) {
+      if (shouldTrackProgress && playableMedia?.id) {
         _interactWithNode({
           variables: {
-            nodeId: videoMedia.id,
+            nodeId: playableMedia.id,
             action,
             data,
           },
@@ -75,7 +79,7 @@ function VideoPlayer(props = {}) {
 
             cache.modify({
               id: cache.identify({
-                __typename: 'VideoMedia',
+                __typename: playableMedia.__typename,
                 id: variables.nodeId,
               }),
               fields: {
@@ -91,7 +95,7 @@ function VideoPlayer(props = {}) {
         });
       }
     },
-    [_interactWithNode, videoMedia, isLiveStreaming]
+    [_interactWithNode, playableMedia, isLiveStreaming, shouldTrackProgress]
   );
 
   // This *could* be extracted to a local hook.
@@ -111,15 +115,15 @@ function VideoPlayer(props = {}) {
         sessionId: sessionId.current,
         contentAssetId: get(props, 'parentNode.id'),
         parentOriginId: get(props, 'parentNode.originId'),
-        originId: get(props, 'parentNode.videos[0].originId'),
-        originSource: get(props, 'parentNode.videos[0].originType'),
+        originId: get(playableMedia, 'originId'),
+        originSource: get(playableMedia, 'originType'),
         videoPlayer: 'Apollos Web',
         sound: 1,
         fullScreen: true,
         livestream: false,
         timestamp: today.toUTCString(),
         title: get(props, 'parentNode.title'),
-        totalLength: get(props, 'parentNode.videos[0].duration'),
+        totalLength: get(playableMedia, 'duration'),
         publishedAt: new Date(parseInt(get(props, 'parentNode.publishDate', '0'), 10)),
         ...livestreamProperties,
         ..._analyticsData,
@@ -247,14 +251,14 @@ function VideoPlayer(props = {}) {
 
   const source = isLiveStreaming
     ? props.parentNode?.stream?.sources?.find((streamSource) => streamSource?.uri)?.uri
-    : videoMedia?.sources?.find((videoSource) => videoSource?.uri)?.uri;
+    : playableMedia?.sources?.find((mediaSource) => mediaSource?.uri)?.uri;
 
-  if (props.parentNode?.videos?.embedHtml) {
+  if (playableMedia?.embedHtml) {
     return (
       <EmbededPlayer
         {...props}
         dangerouslySetInnerHTML={{
-          __html: parseHTMLContent(props.parentNode?.videos?.embedHtml, {
+          __html: parseHTMLContent(playableMedia.embedHtml, {
             sanitizeOptions: {
               ALLOWED_TAGS: ['iframe'],
               ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'],
@@ -321,6 +325,7 @@ VideoPlayer.propTypes = {
     summary: PropTypes.string,
     title: PropTypes.string,
     videos: PropTypes.arrayOf(VideoMedia),
+    audios: PropTypes.arrayOf(VideoMedia),
   }),
   onVideoEnd: PropTypes.func,
   livestream: PropTypes.shape({
diff --git a/packages/web-shared/fragments/fragments.js b/packages/web-shared/fragments/fragments.js
index 0c6ac819..37330abd 100644
--- a/packages/web-shared/fragments/fragments.js
+++ b/packages/web-shared/fragments/fragments.js
@@ -18,6 +18,18 @@ const VIDEO_MEDIA_FIELDS = gql`
   }
 `;
 
+const AUDIO_MEDIA_FIELDS = gql`
+  fragment AudioMediaFields on AudioMedia {
+    __typename
+    id
+    key
+    name
+    sources {
+      uri
+    }
+  }
+`;
+
 const CONTENT_CARD_FRAGMENT = gql`
   fragment ContentCard on CardListItem {
     id
@@ -112,6 +124,7 @@ const EVENT_FRAGMENT = gql`
 
 export {
   VIDEO_MEDIA_FIELDS,
+  AUDIO_MEDIA_FIELDS,
   CONTENT_NODE_FRAGMENT,
   CONTENT_SINGLE_FRAGMENT,
   EVENT_FRAGMENT,
diff --git a/packages/web-shared/hooks/useContentItem.js b/packages/web-shared/hooks/useContentItem.js
index a4ce66fe..cba199bf 100644
--- a/packages/web-shared/hooks/useContentItem.js
+++ b/packages/web-shared/hooks/useContentItem.js
@@ -2,6 +2,7 @@ import { gql, useQuery } from '@apollo/client';
 
 import {
   VIDEO_MEDIA_FIELDS,
+  AUDIO_MEDIA_FIELDS,
   CONTENT_NODE_FRAGMENT,
   CONTENT_SINGLE_FRAGMENT,
   EVENT_FRAGMENT,
@@ -9,6 +10,7 @@ import {
 
 export const GET_CONTENT_ITEM = gql`
   ${VIDEO_MEDIA_FIELDS}
+  ${AUDIO_MEDIA_FIELDS}
   ${CONTENT_NODE_FRAGMENT}
   ${CONTENT_SINGLE_FRAGMENT}
   ${EVENT_FRAGMENT}
@@ -28,6 +30,9 @@ export const GET_CONTENT_ITEM = gql`
     videos {
       ...VideoMediaFields
     }
+    audios {
+      ...AudioMediaFields
+    }
   }
 
   query getContentItem($id: ID!) {
@@ -77,6 +82,9 @@ export const GET_CONTENT_ITEM = gql`
         videos {
           ...VideoMediaFields
         }
+        audios {
+          ...AudioMediaFields
+        }
         parentItem {
           ...SubCardFragment
         }
diff --git a/web-embeds/src/VideoPlayer.test.js b/web-embeds/src/VideoPlayer.test.js
index c474dd8d..bcdcd7c2 100644
--- a/web-embeds/src/VideoPlayer.test.js
+++ b/web-embeds/src/VideoPlayer.test.js
@@ -63,4 +63,30 @@ describe("VideoPlayer", () => {
       "https://example.com/audio.mp3"
     );
   });
+
+  it("renders an AudioMedia source when no videos are present", () => {
+    render(
+      <VideoPlayer
+        coverImage="https://example.com/cover.jpg"
+        parentNode={{
+          id: "content-2",
+          publishDate: "0",
+          title: "Audio only content",
+          audios: [
+            {
+              __typename: "AudioMedia",
+              id: "audio-1",
+              sources: [{ uri: "https://example.com/audio-only.mp3" }],
+            },
+          ],
+        }}
+        userProgress={{ complete: false, playhead: 0 }}
+      />
+    );
+
+    expect(screen.getByTestId("player-shell")).toHaveAttribute(
+      "data-url",
+      "https://example.com/audio-only.mp3"
+    );
+  });
 });