diff --git a/packages/devtools/client/components/AssetDetails.vue b/packages/devtools/client/components/AssetDetails.vue
index 255733a3ae..07e3df5610 100644
--- a/packages/devtools/client/components/AssetDetails.vue
+++ b/packages/devtools/client/components/AssetDetails.vue
@@ -118,6 +118,7 @@ const supportsPreview = computed(() => {
     'image',
     'text',
     'video',
+    'audio',
     'font',
   ].includes(asset.value.type)
 })
diff --git a/packages/devtools/client/components/AssetPreview.vue b/packages/devtools/client/components/AssetPreview.vue
index 03808715aa..3ab1bbf742 100644
--- a/packages/devtools/client/components/AssetPreview.vue
+++ b/packages/devtools/client/components/AssetPreview.vue
@@ -25,6 +25,10 @@ defineProps<{
     <div v-else-if="asset.type === 'video'">
       <video :src="asset.publicPath" :autoplay="detail" :controls="detail" />
     </div>
+    <div v-else-if="asset.type === 'audio'">
+      <div v-if="!detail" i-carbon-volume-up text-3xl op20 />
+      <audio v-else :src="asset.publicPath" controls />
+    </div>
     <div v-else i-carbon-help text-3xl op20 />
   </div>
 </template>