Add show_edit_button param to gr.Audio (#5149)

* add show_edit_button param

* add changeset

* formatting

---------

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

.changeset/true-dots-invent.md

@@ -0,0 +1,6 @@
+---
+"@gradio/audio": minor
+"gradio": minor
+---
+
+feat:Add `show_edit_button` param to `gr.Audio`

gradio/components/audio.py

@@ -72,6 +72,7 @@ def __init__(
         autoplay: bool = False,
         show_download_button=True,
         show_share_button: bool | None = None,
+        show_edit_button: bool | None = True,
         **kwargs,
     ):
         """
@@ -94,6 +95,7 @@ def __init__(
             autoplay: Whether to automatically play the audio when the component is used as an output. Note: browsers will not autoplay audio files if the user has not interacted with the page yet.
             show_download_button: If True, will show a download button in the corner of the component for saving audio. If False, icon does not appear.
             show_share_button: If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.
+            show_edit_button: If True, will show an edit icon in the corner of the component that allows user to edit the audio. If False, icon does not appear. Default is True.
         """
         valid_sources = ["upload", "microphone"]
         source = source if source else ("microphone" if streaming else "upload")
@@ -121,6 +123,7 @@ def __init__(
             if show_share_button is None
             else show_share_button
         )
+        self.show_edit_button = show_edit_button
         IOComponent.__init__(
             self,
             label=label,
@@ -146,6 +149,7 @@ def get_config(self):
             "autoplay": self.autoplay,
             "show_download_button": self.show_download_button,
             "show_share_button": self.show_share_button,
+            "show_edit_button": self.show_edit_button,
             **IOComponent.get_config(self),
         }
 
@@ -169,6 +173,7 @@ def update(
         autoplay: bool | None = None,
         show_download_button: bool | None = None,
         show_share_button: bool | None = None,
+        show_edit_button: bool | None = None,
     ):
         return {
             "source": source,
@@ -183,6 +188,7 @@ def update(
             "autoplay": autoplay,
             "show_download_button": show_download_button,
             "show_share_button": show_share_button,
+            "show_edit_button": show_edit_button,
             "__type__": "update",
         }
 

js/audio/index.svelte

@@ -27,6 +27,7 @@
 	export let autoplay = false;
 	export let show_download_button = true;
 	export let show_share_button = false;
+	export let show_edit_button = true;
 </script>
 
 {#if mode === "dynamic"}
@@ -49,6 +50,7 @@
 		{min_width}
 		{loading_status}
 		{autoplay}
+		{show_edit_button}
 		on:change
 		on:stream
 		on:drag

js/audio/interactive/Audio.svelte

@@ -27,6 +27,7 @@
 	export let pending = false;
 	export let streaming = false;
 	export let autoplay = false;
+	export let show_edit_button = true;
 
 	// TODO: make use of this
 	// export let type: "normal" | "numpy" = "normal";
@@ -51,7 +52,7 @@
 	function get_modules(): void {
 		module_promises = [
 			import("extendable-media-recorder"),
-			import("extendable-media-recorder-wav-encoder")
+			import("extendable-media-recorder-wav-encoder"),
 		];
 	}
 
@@ -91,7 +92,7 @@
 		let _audio_blob = new Blob(blobs, { type: "audio/wav" });
 		value = {
 			data: await blob_to_data_url(_audio_blob),
-			name: "audio.wav"
+			name: "audio.wav",
 		};
 		dispatch(event, value);
 	};
@@ -203,7 +204,7 @@
 	}
 
 	function handle_change({
-		detail: { values }
+		detail: { values },
 	}: {
 		detail: { values: [number, number] };
 	}): void {
@@ -213,14 +214,14 @@
 			data: value.data,
 			name,
 			crop_min: values[0],
-			crop_max: values[1]
+			crop_max: values[1],
 		});
 
 		dispatch("edit");
 	}
 
 	function handle_load({
-		detail
+		detail,
 	}: {
 		detail: {
 			data: string;
@@ -283,7 +284,7 @@
 	<ModifyUpload
 		on:clear={clear}
 		on:edit={() => (mode = "edit")}
-		editable
+		editable={show_edit_button}
 		absolute={true}
 	/>
 

js/audio/interactive/InteractiveAudio.svelte

@@ -38,6 +38,7 @@
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
 	export let autoplay = false;
+	export let show_edit_button = true;
 
 	let old_value: null | FileData | string = null;
 
@@ -83,6 +84,7 @@
 		{pending}
 		{streaming}
 		{autoplay}
+		{show_edit_button}
 		on:edit
 		on:play
 		on:pause

js/audio/static/AudioPlayer.svelte

@@ -34,7 +34,7 @@
 	$: value &&
 		dispatch("change", {
 			name: name,
-			data: value?.data
+			data: value?.data,
 		});
 
 	function handle_ended(): void {

test/test_components.py

@@ -844,6 +844,7 @@ def test_component_functions(self):
             "name": "audio",
             "show_download_button": True,
             "show_share_button": False,
+            "show_edit_button": True,
             "streaming": False,
             "show_label": True,
             "label": "Upload Your Audio",
@@ -883,6 +884,7 @@ def test_component_functions(self):
             "name": "audio",
             "show_download_button": True,
             "show_share_button": False,
+            "show_edit_button": True,
             "streaming": False,
             "show_label": True,
             "label": None,