Create Wasm-compatible audio components

js/audio/interactive/Audio.svelte

@@ -13,9 +13,9 @@
 	import { Upload, ModifyUpload } from "@gradio/upload";
 	import { BlockLabel } from "@gradio/atoms";
 	import { Music } from "@gradio/icons";
+	import Audio from "../shared/Audio.svelte";
 	// @ts-ignore
 	import Range from "svelte-range-slider-pips";
-	import { loaded } from "../shared/utils";
 	import { _ } from "svelte-i18n";
 
 	import type { IBlobEvent, IMediaRecorder } from "extendable-media-recorder";
@@ -295,10 +295,11 @@
 		absolute={true}
 	/>
 
-	<audio
-		use:loaded={{ autoplay, crop_values }}
+	<Audio
 		controls
-		bind:this={player}
+		{autoplay}
+		{crop_values}
+		bind:node={player}
 		preload="metadata"
 		src={value?.data}
 		on:play

js/audio/package.json

@@ -14,6 +14,7 @@
 		"@gradio/statustracker": "workspace:^",
 		"@gradio/upload": "workspace:^",
 		"@gradio/utils": "workspace:^",
+		"@gradio/wasm": "workspace:^",
 		"extendable-media-recorder": "^9.0.0",
 		"extendable-media-recorder-wav-encoder": "^7.0.76",
 		"svelte-range-slider-pips": "^2.0.1"

js/audio/shared/Audio.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { HTMLAudioAttributes } from "svelte/elements";
+	import { createEventDispatcher } from "svelte";
+	import { loaded, type LoadedParams } from "../shared/utils";
+	import { resolve_wasm_src } from "@gradio/wasm/svelte";
+
+	export let src: HTMLAudioAttributes["src"] = undefined;
+
+	export let autoplay: LoadedParams["autoplay"] = undefined;
+	export let crop_values: LoadedParams["crop_values"] = undefined;
+	export let controls: HTMLAudioAttributes["controls"] = undefined;
+	export let preload: HTMLAudioAttributes["preload"] = undefined;
+
+	export let node: HTMLAudioElement | undefined = undefined;
+
+	const dispatch = createEventDispatcher();
+</script>
+
+{#await resolve_wasm_src(src) then resolved_src}
+	<audio
+		src={resolved_src}
+		{controls}
+		{preload}
+		on:play={dispatch.bind(null, "play")}
+		on:pause={dispatch.bind(null, "pause")}
+		on:ended={dispatch.bind(null, "ended")}
+		bind:this={node}
+		use:loaded={{ autoplay, crop_values }}
+		data-testid={$$props["data-testid"]}
+	/>
+{:catch error}
+	<p style="color: red;">{error.message}</p>
+{/await}

js/audio/shared/utils.ts

@@ -1,6 +1,6 @@
 import type { ActionReturn } from "svelte/action";
 
-interface LoadedParams {
+export interface LoadedParams {
 	crop_values?: [number, number];
 	autoplay?: boolean;
 }