From 12aba774e1f11c1b0d2d4121ad32cad55145d0c9 Mon Sep 17 00:00:00 2001
From: "Yuichiro Tachibana (Tsuchiya)" <t.yic.yt@gmail.com>
Date: Mon, 9 Oct 2023 19:10:21 +0900
Subject: [PATCH] Create Wasm-compatible audio components

---
 js/audio/interactive/Audio.svelte |  9 +++++----
 js/audio/package.json             |  1 +
 js/audio/shared/Audio.svelte      | 33 +++++++++++++++++++++++++++++++
 js/audio/shared/utils.ts          |  2 +-
 pnpm-lock.yaml                    |  3 +++
 5 files changed, 43 insertions(+), 5 deletions(-)
 create mode 100644 js/audio/shared/Audio.svelte

diff --git a/js/audio/interactive/Audio.svelte b/js/audio/interactive/Audio.svelte
index 513a5236b68b7..2c0bc958f2b8e 100644
--- a/js/audio/interactive/Audio.svelte
+++ b/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
diff --git a/js/audio/package.json b/js/audio/package.json
index 53cd017f69c5c..7636de40ccc7c 100644
--- a/js/audio/package.json
+++ b/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"
diff --git a/js/audio/shared/Audio.svelte b/js/audio/shared/Audio.svelte
new file mode 100644
index 0000000000000..01bfa4f6a35ff
--- /dev/null
+++ b/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}
diff --git a/js/audio/shared/utils.ts b/js/audio/shared/utils.ts
index 9b54b7be657ac..a0b6709c91a9e 100644
--- a/js/audio/shared/utils.ts
+++ b/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;
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 79439f564a3eb..cf18da8460c6c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -544,6 +544,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      '@gradio/wasm':
+        specifier: workspace:^
+        version: link:../wasm
       extendable-media-recorder:
         specifier: ^9.0.0
         version: 9.0.0