Add download button for audio (#4977)

* Add download button for audio

* Add summary to CHANGELOG

* Add bool param to gr.Audio for button visibility

* Update CHANGELOG

* formatting

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

CHANGELOG.md

@@ -1,5 +1,7 @@
 # Upcoming Release
 
+- Add a download button for audio, with `show_download_button` param that determines its visibility in static Audio components by [@leuryr](https://github.com/leuryr) in [PR 4977](https://github.com/gradio-app/gradio/pull/4977)
+
 ## New Features:
 
 No changes to highlight.

gradio/components/audio.py

@@ -67,6 +67,7 @@ class Audio(
         elem_classes: list[str] | str | None = None,
         format: Literal["wav", "mp3"] = "wav",
         autoplay: bool = False,
+        show_download_button=True,
         show_share_button: bool | None = None,
         **kwargs,
     ):
@@ -88,6 +89,7 @@ class Audio(
             elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
             format: The file format to save audio files. Either 'wav' or 'mp3'. wav files are lossless but will tend to be larger files. mp3 files tend to be smaller. Default is wav. Applies both when this component is used as an input (when `type` is "format") and when this component is used as an output.
             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.
         """
         valid_sources = ["upload", "microphone"]
@@ -109,6 +111,7 @@ class Audio(
             )
         self.format = format
         self.autoplay = autoplay
+        self.show_download_button = show_download_button
         self.show_share_button = (
             (utils.get_space() is not None)
             if show_share_button is None
@@ -137,6 +140,7 @@ class Audio(
             "value": self.value,
             "streaming": self.streaming,
             "autoplay": self.autoplay,
+            "show_download_button": self.show_download_button,
             "show_share_button": self.show_share_button,
             **IOComponent.get_config(self),
         }
@@ -159,6 +163,7 @@ class Audio(
         interactive: bool | None = None,
         visible: bool | None = None,
         autoplay: bool | None = None,
+        show_download_button: bool | None = None,
         show_share_button: bool | None = None,
     ):
         return {
@@ -172,6 +177,7 @@ class Audio(
             "visible": visible,
             "value": value,
             "autoplay": autoplay,
+            "show_download_button": show_download_button,
             "show_share_button": show_share_button,
             "__type__": "update",
         }

js/app/src/components/Audio/Audio.svelte

@@ -34,12 +34,13 @@
 	export let pending: boolean;
 	export let streaming: boolean;
 	export let root_url: null | string;
-	export let container: boolean = true;
+	export let container = true;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
 	export let autoplay = false;
-	export let show_share_button: boolean = false;
+	export let show_download_button = true;
+	export let show_share_button = false;
 
 	let _value: null | FileData;
 	$: _value = normalise_file(value, root, root_url);
@@ -105,6 +106,7 @@
 		<StaticAudio
 			{autoplay}
 			{show_label}
+			{show_download_button}
 			{show_share_button}
 			value={_value}
 			name={_value?.name || "audio_file"}

js/audio/src/StaticAudio.svelte

@@ -10,8 +10,8 @@
 <script lang="ts">
 	import { createEventDispatcher, tick } from "svelte";
 	import { uploadToHuggingFace } from "@gradio/utils";
-	import { BlockLabel, ShareButton } from "@gradio/atoms";
-	import { Music } from "@gradio/icons";
+	import { BlockLabel, ShareButton, IconButton } from "@gradio/atoms";
+	import { Music, Download } from "@gradio/icons";
 
 	import { loaded } from "./utils";
 
@@ -20,7 +20,8 @@
 	export let name: string;
 	export let show_label = true;
 	export let autoplay: boolean;
-	export let show_share_button: boolean = false;
+	export let show_download_button = true;
+	export let show_share_button = false;
 
 	const dispatch = createEventDispatcher<{
 		change: AudioData;
@@ -43,18 +44,29 @@
 </script>
 
 <BlockLabel {show_label} Icon={Music} float={false} label={label || "Audio"} />
-{#if show_share_button && value !== null}
-	<div class="icon-button">
-		<ShareButton
-			on:error
-			on:share
-			formatter={async (value) => {
-				if (!value) return "";
-				let url = await uploadToHuggingFace(value.data, "url");
-				return `<audio controls src="${url}"></audio>`;
-			}}
-			{value}
-		/>
+{#if value !== null}
+	<div class="icon-buttons">
+		{#if show_download_button}
+			<a
+				href={value.data}
+				target={window.__is_colab__ ? "_blank" : null}
+				download={value.name}
+			>
+				<IconButton Icon={Download} label="Download" />
+			</a>
+		{/if}
+		{#if show_share_button}
+			<ShareButton
+				on:error
+				on:share
+				formatter={async (value) => {
+					if (!value) return "";
+					let url = await uploadToHuggingFace(value.data, "url");
+					return `<audio controls src="${url}"></audio>`;
+				}}
+				{value}
+			/>
+		{/if}
 	</div>
 {/if}
 
@@ -81,9 +93,11 @@
 		width: var(--size-full);
 		height: var(--size-14);
 	}
-	.icon-button {
+	.icon-buttons {
+		display: flex;
 		position: absolute;
 		top: 6px;
 		right: 6px;
+		gap: var(--size-1);
 	}
 </style>

test/test_components.py

@@ -838,6 +838,7 @@ class TestAudio:
             "autoplay": False,
             "source": "upload",
             "name": "audio",
+            "show_download_button": True,
             "show_share_button": False,
             "streaming": False,
             "show_label": True,
@@ -876,6 +877,7 @@ class TestAudio:
         assert audio_output.get_config() == {
             "autoplay": False,
             "name": "audio",
+            "show_download_button": True,
             "show_share_button": False,
             "streaming": False,
             "show_label": True,