diff --git a/.changeset/breezy-cougars-flow.md b/.changeset/breezy-cougars-flow.md
new file mode 100644
index 000000000000..4dbb24d21bd0
--- /dev/null
+++ b/.changeset/breezy-cougars-flow.md
@@ -0,0 +1,6 @@
+---
+"@gradio/audio": minor
+"gradio": minor
+---
+
+feat:Add `editable` parameter to Audio
diff --git a/gradio/components/audio.py b/gradio/components/audio.py
index 95ed46d8c5ed..ecd2276229c4 100644
--- a/gradio/components/audio.py
+++ b/gradio/components/audio.py
@@ -82,6 +82,7 @@ def __init__(
autoplay: bool = False,
show_download_button=True,
show_share_button: bool | None = None,
+ editable: bool = True,
min_length: int | None = None,
max_length: int | None = None,
waveform_options: WaveformOptions | dict | None = None,
@@ -97,7 +98,7 @@ def __init__(
container: If True, will place the component in a container - providing some extra padding around the border.
scale: relative width compared to adjacent Components in a Row. For example, if Component A has scale=2, and Component B has scale=1, A will be twice as wide as B. Should be an integer.
min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
- interactive: if True, will allow users to upload and edit a audio file; if False, can only be used to play audio. If not provided, this is inferred based on whether the component is used as an input or output.
+ interactive: If True, will allow users to upload and edit an audio file. If False, can only be used to play audio. If not provided, this is inferred based on whether the component is used as an input or output.
visible: If False, component will be hidden.
streaming: If set to True when used in a `live` interface as an input, will automatically stream webcam feed. When used set as an output, takes audio chunks yield from the backend and combines them into one streaming audio output.
elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
@@ -107,6 +108,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.
+ editable: If True, allows users to manipulate the audio file (if the component is interactive).
min_length: The minimum length of audio (in seconds) that the user can pass into the prediction function. If None, there is no minimum length.
max_length: The maximum length of audio (in seconds) that the user can pass into the prediction function. If None, there is no maximum length.
waveform_options: A dictionary of options for the waveform display. Options include: waveform_color (str), waveform_progress_color (str), show_controls (bool), skip_length (int). Default is None, which uses the default values for these options.
@@ -146,6 +148,7 @@ def __init__(
if show_share_button is None
else show_share_button
)
+ self.editable = editable
if waveform_options is None:
self.waveform_options = WaveformOptions()
self.waveform_options = (
diff --git a/js/audio/Audio.stories.svelte b/js/audio/Audio.stories.svelte
index 20bc2430d39b..4bf941dd874f 100644
--- a/js/audio/Audio.stories.svelte
+++ b/js/audio/Audio.stories.svelte
@@ -56,6 +56,21 @@
}}
/>
+
+
gradio.dispatch("edit")}
on:play={() => gradio.dispatch("play")}
diff --git a/js/audio/interactive/InteractiveAudio.svelte b/js/audio/interactive/InteractiveAudio.svelte
index 2feb3b6b905b..1652aa599bfa 100644
--- a/js/audio/interactive/InteractiveAudio.svelte
+++ b/js/audio/interactive/InteractiveAudio.svelte
@@ -31,6 +31,7 @@
export let dragging: boolean;
export let active_source: "microphone" | "upload";
export let handle_reset_value: () => void = () => {};
+ export let editable = true;
$: dispatch("drag", dragging);
@@ -259,6 +260,7 @@
{waveform_options}
{trim_region_settings}
{handle_reset_value}
+ {editable}
interactive
on:stop
on:play
diff --git a/js/audio/player/AudioPlayer.svelte b/js/audio/player/AudioPlayer.svelte
index a348b431fceb..4517e85ef0dd 100644
--- a/js/audio/player/AudioPlayer.svelte
+++ b/js/audio/player/AudioPlayer.svelte
@@ -20,6 +20,7 @@
event: "stream" | "change" | "stop_recording"
) => Promise = () => Promise.resolve();
export let interactive = false;
+ export let editable = true;
export let trim_region_settings = {};
export let waveform_settings: Record;
export let waveform_options: WaveformOptions;
@@ -184,6 +185,7 @@
{handle_reset_value}
{waveform_options}
{trim_region_settings}
+ {editable}
/>
{/if}
diff --git a/js/audio/shared/WaveformControls.svelte b/js/audio/shared/WaveformControls.svelte
index 3d7967246f1c..dbc87bbc44c4 100644
--- a/js/audio/shared/WaveformControls.svelte
+++ b/js/audio/shared/WaveformControls.svelte
@@ -23,6 +23,7 @@
export let waveform_options: WaveformOptions = {};
export let trim_region_settings: WaveformOptions = {};
export let show_volume_slider = false;
+ export let editable = true;
export let trimDuration = 0;
@@ -237,21 +238,21 @@