first audio thing that i want to try

src/content/config.ts

@@ -17,6 +17,7 @@ const blog = defineCollection({
             })
             .optional(),
         draft: z.boolean().optional().default(false),
+        audio: z.boolean().optional().default(false),
     }),
 });
 

src/pages/blog/[...slug].astro

@@ -116,6 +116,23 @@ const readingTime = getReadingTime(post.body);
                     )
                 }
                 <div class="divider">==============================</div>
+
+                {
+                    post.data.audio && (
+                        <div class="audio-player">
+                            <audio
+                                controls
+                                preload="none"
+                                aria-label={`Luister naar: ${post.data.title}`}
+                            >
+                                <source
+                                    src={`https://audio.hiddenden.cafe/${post.slug}.mp3`}
+                                    type="audio/mpeg"
+                                />
+                            </audio>
+                        </div>
+                    )
+                }
             </header>
 
             <article class="content fade-in">
@@ -345,6 +362,17 @@ const readingTime = getReadingTime(post.body);
         border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
     }
 
+    .audio-player {
+        margin-top: var(--space-md);
+    }
+
+    .audio-player audio {
+        width: 100%;
+        height: 36px;
+        accent-color: var(--color-accent);
+        border-radius: 4px;
+    }
+
     .content {
         color: var(--color-text);
         line-height: 1.8;