Add autoplay to waveform_settings (#6317)

* add autoplay to waveform_settings * add changeset * add autoplay story * remove unused autoplay param * remove reundant params --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
gradio-app · Nov 7, 2023 · 19af280 · 19af280
1 parent d3b53a4
commit 19af280
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 20 deletions.
diff --git a/.changeset/bright-candles-jam.md b/.changeset/bright-candles-jam.md
@@ -0,0 +1,6 @@
+---
+"@gradio/audio": patch
+"gradio": patch
+---
+
+fix:Add autoplay to `waveform_settings`
diff --git a/js/audio/Audio.stories.svelte b/js/audio/Audio.stories.svelte
@@ -36,7 +36,22 @@
 	args={{
 		value: null,
 		interactive: true,
-		sources: ["microphone", "upload"],
+		sources: ["upload", "microphone"],
 		label: "Audio Upload"
 	}}
 />
+
+<Story
+	name="Audio with autoplay"
+	args={{
+		value: {
+			path: "https://audio-samples.github.io/samples/mp3/blizzard_unconditional/sample-0.mp3",
+			url: "https://audio-samples.github.io/samples/mp3/blizzard_unconditional/sample-0.mp3",
+			orig_name: "sample-0.mp3"
+		},
+		interactive: true,
+		sources: ["microphone", "upload"],
+		label: "Audio Upload",
+		autoplay: true
+	}}
+/>
diff --git a/js/audio/Index.svelte b/js/audio/Index.svelte
@@ -97,6 +97,7 @@
 		barHeight: 4,
 		cursorWidth: 2,
 		cursorColor: "#ddd5e9",
+		autoplay: autoplay,
 		barRadius: 10,
 		dragToSeek: true,
 		mediaControls: waveform_options.show_controls
@@ -133,7 +134,6 @@
 
 		<StaticAudio
 			i18n={gradio.i18n}
-			{autoplay}
 			{show_label}
 			{show_download_button}
 			{show_share_button}
@@ -176,7 +176,6 @@
 			{active_source}
 			{pending}
 			{streaming}
-			{autoplay}
 			{handle_reset_value}
 			bind:dragging
 			on:edit={() => gradio.dispatch("edit")}

diff --git a/js/audio/interactive/InteractiveAudio.svelte b/js/audio/interactive/InteractiveAudio.svelte
@@ -24,7 +24,6 @@
 		| ["upload", "microphone"] = ["microphone", "upload"];
 	export let pending = false;
 	export let streaming = false;
-	export let autoplay = false;
 	export let i18n: I18nFormatter;
 	export let waveform_settings = {};
 	export let dragging: boolean;
@@ -245,7 +244,6 @@
 		bind:mode
 		{value}
 		{label}
-		{autoplay}
 		{i18n}
 		{dispatch}
 		{dispatch_blob}

diff --git a/js/audio/player/AudioPlayer.svelte b/js/audio/player/AudioPlayer.svelte
@@ -11,7 +11,6 @@
 
 	export let value: null | FileData = null;
 	export let label: string;
-	export let autoplay: boolean;
 	export let i18n: I18nFormatter;
 	export let dispatch: (event: any, detail?: any) => void;
 	export let dispatch_blob: (
@@ -55,11 +54,6 @@
 		playing = false;
 	}
 
-	$: if (autoplay) {
-		waveform?.play();
-		playing = true;
-	}
-
 	$: waveform?.on("decode", (duration: any) => {
 		audioDuration = duration;
 		durationRef && (durationRef.textContent = formatTime(duration));

diff --git a/js/audio/static/StaticAudio.svelte b/js/audio/static/StaticAudio.svelte
@@ -11,7 +11,6 @@
 	export let value: null | FileData = null;
 	export let label: string;
 	export let show_label = true;
-	export let autoplay: boolean;
 	export let show_download_button = true;
 	export let show_share_button = false;
 	export let i18n: I18nFormatter;
@@ -61,14 +60,7 @@
 		{/if}
 	</div>
 
-	<AudioPlayer
-		{value}
-		{label}
-		{autoplay}
-		{i18n}
-		{dispatch}
-		{waveform_settings}
-	/>
+	<AudioPlayer {value} {label} {i18n} {dispatch} {waveform_settings} />
 {:else}
 	<Empty size="small">
 		<Music />