feat: add audio example

src/markdoc/nodes/Image.svelte

@@ -9,6 +9,7 @@
     export let title: string;
 
     const inTable = hasContext('in-table') ? getContext('in-table') : false;
+    const isAudio = /\.(wav|mp3|m4a|ogg)$/i.test(src);
 
     const {
         elements: { portalled, trigger, content, overlay },
@@ -19,12 +20,17 @@
     });
 </script>
 
-{#if inTable}
-    <img {src} {alt} {title} loading="lazy" style:vertical-align="middle" />
+{#if inTable || isAudio}
+    {#if isAudio}
+        <audio {src} controls class="u-width-full-line">
+            Your browser does not support the audio element.
+        </audio>
+    {:else}
+        <img {src} {alt} {title} loading="lazy" style:vertical-align="middle" />
+    {/if}
 {:else}
     <div class="web-media main">
         <img {src} {alt} {title} loading="lazy" class="web-u-media-ratio-16-9 u-width-full-line" />
-
         <div class="abs">
             <Tooltip closeOnPointerDown>
                 <button class="web-button is-secondary" use:melt={$trigger}>

src/routes/docs/products/ai/tutorials/music-generation/+page.markdoc

@@ -153,5 +153,7 @@ Click **Execute** and you should see a response similar to the following:
 }
 ```
 
-Use the fileId to download the generated audio file from the Appwrite Storage.
+Use the fileId to download the generated audio file from the Appwrite Storage. Here's an example of music generated from the prompt above:
+
+![Audio of generated music](/audio/docs/ai/tutorials/music-generation/generated-music.wav)
 {% /section %}