Hide the waveform when playing recorded audio if `show_recording_wave…

…form` is `False` (#10405) * changes * add changeset * revert * changes * format * story * test * changes * add changeset * changes * changees * changes * changes * format --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
gradio-app · Jan 24, 2025 · 92dda15 · 92dda15
1 parent 516d98b
commit 92dda15
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 15 deletions.
diff --git a/.changeset/afraid-things-raise.md b/.changeset/afraid-things-raise.md
@@ -0,0 +1,8 @@
+---
+"@gradio/audio": patch
+"@gradio/chatbot": patch
+"@gradio/multimodaltextbox": patch
+"gradio": patch
+---
+
+fix:Hide the waveform when playing recorded audio if `show_recording_waveform` is `False`
diff --git a/gradio/components/audio.py b/gradio/components/audio.py
@@ -4,6 +4,7 @@
 
 import dataclasses
 import io
+import warnings
 from collections.abc import Callable, Sequence
 from pathlib import Path
 from typing import TYPE_CHECKING, Any, Literal
@@ -35,10 +36,10 @@ class WaveformOptions:
         waveform_color: The color (as a hex string or valid CSS color) of the full waveform representing the amplitude of the audio. Defaults to a light gray color.
         waveform_progress_color: The color (as a hex string or valid CSS color) that the waveform fills with to as the audio plays. Defaults to the accent color.
         trim_region_color: The color (as a hex string or valid CSS color) of the trim region. Defaults to the accent color.
-        show_recording_waveform: Whether to show the waveform when recording audio. Defaults to True.
-        show_controls: Whether to show the standard HTML audio player below the waveform when recording audio or playing recorded audio. Defaults to False.
-        skip_length: The percentage (between 0 and 100) of the audio to skip when clicking on the skip forward / skip backward buttons. Defaults to 5.
-        sample_rate: The output sample rate (in Hz) of the audio after editing. Defaults to 44100.
+        show_recording_waveform: If True, shows a waveform when recording audio or playing audio. If False, uses the default browser audio players. For streamed audio, the default browser audio player is always used.
+        show_controls: Deprecated and has no effect. Use `show_recording_waveform` instead.
+        skip_length: The percentage (between 0 and 100) of the audio to skip when clicking on the skip forward / skip backward buttons.
+        sample_rate: The output sample rate (in Hz) of the audio after editing.
     """
 
     waveform_color: str | None = None
@@ -190,6 +191,10 @@ def __init__(
             self.waveform_options = WaveformOptions(**waveform_options)
         else:
             self.waveform_options = waveform_options
+        if self.waveform_options.show_controls is not False:
+            warnings.warn(
+                "The `show_controls` parameter is deprecated and will be removed in a future release. Use `show_recording_waveform` instead."
+            )
         self.min_length = min_length
         self.max_length = max_length
         self.recording = recording

diff --git a/js/audio/Audio.stories.svelte b/js/audio/Audio.stories.svelte
@@ -33,6 +33,21 @@
 	}}
 />
 
+<Story
+	name="Audio Player without recording waveform"
+	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"
+		},
+		waveform_options: {
+			show_recording_waveform: false
+		},
+		label: "Audio Player"
+	}}
+/>
+
 <Story
 	name="Audio Recorder"
 	args={{

diff --git a/js/audio/Index.svelte b/js/audio/Index.svelte
@@ -36,7 +36,9 @@
 	export let show_download_button: boolean;
 	export let show_share_button = false;
 	export let editable = true;
-	export let waveform_options: WaveformOptions = {};
+	export let waveform_options: WaveformOptions = {
+		show_recording_waveform: true
+	};
 	export let pending: boolean;
 	export let streaming: boolean;
 	export let stream_every: number;

diff --git a/js/audio/player/AudioPlayer.svelte b/js/audio/player/AudioPlayer.svelte
@@ -54,6 +54,9 @@
 		load: undefined;
 	}>();
 
+	$: use_waveform =
+		waveform_options.show_recording_waveform && !value?.is_stream;
+
 	const create_waveform = (): void => {
 		waveform = WaveSurfer.create({
 			container: container,
@@ -66,7 +69,7 @@
 		});
 	};
 
-	$: if (!value?.is_stream && container !== undefined && container !== null) {
+	$: if (use_waveform && container !== undefined && container !== null) {
 		if (waveform !== undefined) waveform.destroy();
 		container.innerHTML = "";
 		create_waveform();
@@ -137,7 +140,11 @@
 		stream_active = false;
 		await resolve_wasm_src(data).then((resolved_src) => {
 			if (!resolved_src || value?.is_stream) return;
-			return waveform?.load(resolved_src);
+			if (waveform_options.show_recording_waveform) {
+				waveform?.load(resolved_src);
+			} else if (audio_player) {
+				audio_player.src = resolved_src;
+			}
 		});
 	}
 
@@ -203,7 +210,7 @@
 
 <audio
 	class="standard-player"
-	class:hidden={!(value && value.is_stream)}
+	class:hidden={use_waveform}
 	controls
 	autoplay={waveform_settings.autoplay}
 	on:load
@@ -215,7 +222,7 @@
 	<Empty size="small">
 		<Music />
 	</Empty>
-{:else if !value.is_stream}
+{:else if use_waveform}
 	<div
 		class="component-wrapper"
 		data-testid={label ? "waveform-" + label : "unlabelled-audio"}
@@ -238,7 +245,6 @@
 			</div>
 		</div>
 
-		<!-- {#if waveform} -->
 		<WaveformControls
 			{container}
 			{waveform}
@@ -256,7 +262,6 @@
 			{trim_region_settings}
 			{editable}
 		/>
-		<!-- {/if} -->
 	</div>
 {/if}
 

diff --git a/js/audio/shared/WaveformRecordControls.svelte b/js/audio/shared/WaveformRecordControls.svelte
@@ -195,6 +195,10 @@
 		border: 1px solid var(--block-border-color);
 	}
 
+	.duration-button {
+		border-radius: var(--button-large-radius);
+	}
+
 	.stop-button:disabled {
 		cursor: not-allowed;
 	}

diff --git a/js/audio/static/StaticAudio.svelte b/js/audio/static/StaticAudio.svelte
@@ -21,8 +21,10 @@
 	export let show_download_button = true;
 	export let show_share_button = false;
 	export let i18n: I18nFormatter;
-	export let waveform_settings: Record<string, any>;
-	export let waveform_options: WaveformOptions;
+	export let waveform_settings: Record<string, any> = {};
+	export let waveform_options: WaveformOptions = {
+		show_recording_waveform: true
+	};
 	export let editable = true;
 	export let loop: boolean;
 	export let display_icon_button_wrapper_top_corner = false;

diff --git a/js/chatbot/shared/Component.svelte b/js/chatbot/shared/Component.svelte
@@ -73,7 +73,6 @@
 			{i18n}
 			label=""
 			waveform_settings={{ autoplay: props.autoplay }}
-			waveform_options={{}}
 			show_download_button={allow_file_downloads}
 			{display_icon_button_wrapper_top_corner}
 			on:load

diff --git a/js/multimodaltextbox/shared/MultimodalTextbox.svelte b/js/multimodaltextbox/shared/MultimodalTextbox.svelte
@@ -54,7 +54,9 @@
 	export let file_count: "single" | "multiple" | "directory" = "multiple";
 	export let max_plain_text_length = 1000;
 	export let waveform_settings: Record<string, any>;
-	export let waveform_options: WaveformOptions = {};
+	export let waveform_options: WaveformOptions = {
+		show_recording_waveform: true
+	};
 	export let sources: ["microphone" | "upload"] = ["upload"];
 	export let active_source: "microphone" | null = null;
 	let upload_component: Upload;