diff --git a/helm-frontend/src/components/MediaObjectDisplay.tsx b/helm-frontend/src/components/MediaObjectDisplay.tsx
index 469fcd1bd7..a92b131886 100644
--- a/helm-frontend/src/components/MediaObjectDisplay.tsx
+++ b/helm-frontend/src/components/MediaObjectDisplay.tsx
@@ -21,6 +21,20 @@ export default function MediaObjectDisplay({ mediaObject }: Props) {
         <br />
       </div>
     );
+  } else if (mediaObject.content_type.includes("audio")) {
+    if (mediaObject.location === undefined) {
+      return null;
+    }
+    const url = getBenchmarkEndpoint(
+      mediaObject.location
+        .replace("benchmark_output/", "")
+        .replace("prod_env/", "../"),
+    );
+    return (
+      <div>
+        <audio controls src={url}></audio>
+      </div>
+    );
   } else {
     if (
       mediaObject.text &&
diff --git a/helm-frontend/src/utils/getBenchmarkEndpoint.ts b/helm-frontend/src/utils/getBenchmarkEndpoint.ts
index a4469a0353..5fdf2a7994 100644
--- a/helm-frontend/src/utils/getBenchmarkEndpoint.ts
+++ b/helm-frontend/src/utils/getBenchmarkEndpoint.ts
@@ -1,4 +1,7 @@
 export default function getBenchmarkEndpoint(path: string): string {
+  if (path.startsWith("http://") || path.startsWith("https://")) {
+    return path;
+  }
   return `${window.BENCHMARK_OUTPUT_BASE_URL.replace(/\/$/, "")}/${path.replace(
     /^\//,
     "",