diff --git a/meeting-notes/2024-01-18.mdx b/meeting-notes/2024-01-18.mdx
index 0b6c16e6f2..b4a223eb49 100644
--- a/meeting-notes/2024-01-18.mdx
+++ b/meeting-notes/2024-01-18.mdx
@@ -4,13 +4,9 @@ authors: naman
 tags: [protocol]
 ---
 
-<audio controls>
-  <source
-    src="https://pub-b2eaaee2bbe74d70820bacb7298958f5.r2.dev/0101802024_protocol_developer_call.mp3"
-    type="audio/mpeg"
-  ></source>
-  Your browser does not support the audio element.
-</audio>
+import AudioPlayer from "@site/src/components/AudioPlayer";
+
+<AudioPlayer src="https://pub-b2eaaee2bbe74d70820bacb7298958f5.r2.dev/0101802024_protocol_developer_call.mp3" />
 
 [Discord agenda thread](https://discord.com/channels/897514728459468821/1196897067445010452)
 
diff --git a/meeting-notes/2024-01-26.mdx b/meeting-notes/2024-01-26.mdx
index 1156f4b2cc..f5b59353e2 100644
--- a/meeting-notes/2024-01-26.mdx
+++ b/meeting-notes/2024-01-26.mdx
@@ -4,13 +4,9 @@ authors: kalepail
 tags: [developer]
 ---
 
-<audio controls>
-  <source
-    src="https://pub-b2eaaee2bbe74d70820bacb7298958f5.r2.dev/Soroban-Dev-Call-01-26-24.mp3"
-    type="audio/mpeg"
-  ></source>
-  Your browser does not support the audio element.
-</audio>
+import AudioPlayer from "@site/src/components/AudioPlayer";
+
+<AudioPlayer src="https://pub-b2eaaee2bbe74d70820bacb7298958f5.r2.dev/Soroban-Dev-Call-01-26-24.mp3" />
 
 [Discord agenda thread](https://discord.com/channels/897514728459468821/1199121845656486009)
 
diff --git a/meeting-notes/2024-02-01.mdx b/meeting-notes/2024-02-01.mdx
index f581603ba8..7411b1174c 100644
--- a/meeting-notes/2024-02-01.mdx
+++ b/meeting-notes/2024-02-01.mdx
@@ -4,13 +4,9 @@ authors: naman
 tags: [protocol]
 ---
 
-<audio controls>
-  <source
-    src="https://pub-b2eaaee2bbe74d70820bacb7298958f5.r2.dev/Stellar-Protocol-Meeting-02-01-2024.mp3"
-    type="audio/mpeg"
-  ></source>
-  Your browser does not support the audio element.
-</audio>
+import AudioPlayer from "@site/src/components/AudioPlayer";
+
+<AudioPlayer src="https://pub-b2eaaee2bbe74d70820bacb7298958f5.r2.dev/Stellar-Protocol-Meeting-02-01-2024.mp3" />
 
 [Discord agenda thread](https://discord.com/channels/897514728459468821/1201979721211203614)
 
diff --git a/src/components/AudioPlayer.tsx b/src/components/AudioPlayer.tsx
new file mode 100644
index 0000000000..766b01d360
--- /dev/null
+++ b/src/components/AudioPlayer.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+type AudioPlayerProps = {
+  src: string;
+};
+
+export default function AudioPlayer({ src }: AudioPlayerProps) {
+  return (
+    <div
+      style={{
+        maxWidth: 640,
+        margin: "20px auto",
+        padding: "12px 14px",
+        borderRadius: 14,
+        background: "rgba(59, 130, 246, 0.12)", // blue
+        border: "1px solid rgba(59, 130, 246, 0.35)",
+      }}
+    >
+      <div
+        style={{
+          fontSize: "0.8rem",
+          fontWeight: 600,
+          color: "#3B82F6",
+          marginBottom: 6,
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+        }}
+      >
+        🎧 Audio Recording
+      </div>
+
+      <audio controls preload="metadata" style={{ width: "100%" }}>
+        <source src={src} type="audio/mpeg" />
+        Your browser does not support the audio element.
+      </audio>
+    </div>
+  );
+}