Update static/AudioPlayerto use ../shared/Audio instead of the native <audio> for Wasm support (#6004)

* Update js/audio/static/AudioPlayer.svelte to use ../shared/Audio.svelte instead of the native `<audio>` for Wasm support

* add changeset

* Update markup and stying

* Apply formatter

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/wise-hands-dress.md

@@ -0,0 +1,6 @@
+---
+"@gradio/audio": patch
+"gradio": patch
+---
+
+fix:Update static/AudioPlayerto use ../shared/Audio instead of the native `<audio>` for Wasm support

js/audio/shared/Audio.svelte

@@ -32,11 +32,10 @@
 	<p style="color: red;">{error.message}</p>
 {/await}
 
-
 <style>
 	audio {
 		padding: var(--size-2);
 		width: var(--size-full);
 		height: var(--size-14);
 	}
-</style>
+</style>

js/audio/static/AudioPlayer.svelte

@@ -14,6 +14,7 @@
 	import { BlockLabel, ShareButton, IconButton } from "@gradio/atoms";
 	import { Music, Download } from "@gradio/icons";
 
+	import Audio from "../shared/Audio.svelte";
 	import { loaded } from "../shared/utils";
 
 	export let value: null | { name: string; data: string } = null;
@@ -81,24 +82,21 @@
 		<Music />
 	</Empty>
 {:else}
-	<audio
-		use:loaded={{ autoplay }}
-		controls
-		preload="metadata"
-		src={value?.data}
-		on:play
-		on:pause
-		on:ended={handle_ended}
-		data-testid={`${label}-audio`}
-	/>
+	<div class="container">
+		<Audio
+			{autoplay}
+			controls
+			preload="metadata"
+			src={value?.data}
+			on:play
+			on:pause
+			on:ended={handle_ended}
+			data-testid={`${label}-audio`}
+		/>
+	</div>
 {/if}
 
 <style>
-	audio {
-		padding: var(--size-2);
-		width: var(--size-full);
-		height: var(--size-14);
-	}
 	.icon-buttons {
 		display: flex;
 		position: absolute;