Hide the waveform when playing recorded audio if show_recording_waveform is False

.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`

gradio/components/audio.py

@@ -35,17 +35,17 @@ 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: Whether to show the waveform when recording audio or playing audio.
+        show_controls: Whether to show the standard HTML audio player below the waveform when recording audio or playing audio. By default, this is set to False if `show_recording_waveform` is True, and vice versa.
+        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
     waveform_progress_color: str | None = None
     trim_region_color: str | None = None
     show_recording_waveform: bool = True
-    show_controls: bool = False
+    show_controls: bool | None = None
     skip_length: int | float = 5
     sample_rate: int = 44100
 
@@ -190,6 +190,10 @@ def __init__(
             self.waveform_options = WaveformOptions(**waveform_options)
         else:
             self.waveform_options = waveform_options
+        if self.waveform_options.show_controls is None:
+            self.waveform_options.show_controls = (
+                not self.waveform_options.show_recording_waveform
+            )
         self.min_length = min_length
         self.max_length = max_length
         self.recording = recording

js/audio/Audio.stories.svelte

@@ -33,6 +33,22 @@
 	}}
 />
 
+<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,
+			show_controls: true
+		},
+		label: "Audio Player"
+	}}
+/>
+
 <Story
 	name="Audio Recorder"
 	args={{

js/audio/Index.svelte

@@ -36,7 +36,10 @@
 	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,
+		show_controls: false
+	};
 	export let pending: boolean;
 	export let streaming: boolean;
 	export let stream_every: number;

js/audio/player/AudioPlayer.svelte

@@ -54,6 +54,10 @@
 		load: undefined;
 	}>();
 
+	$: use_default_controls = waveform_options.show_controls || value?.is_stream;
+	$: use_waveform =
+		waveform_options.show_recording_waveform && !value?.is_stream;
+
 	const create_waveform = (): void => {
 		waveform = WaveSurfer.create({
 			container: container,
@@ -137,7 +141,13 @@
 		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 (waveform_options.show_controls) {
+				if (audio_player) {
+					audio_player.src = resolved_src;
+				}
+			}
 		});
 	}
 
@@ -203,7 +213,7 @@
 
 <audio
 	class="standard-player"
-	class:hidden={!(value && value.is_stream)}
+	class:hidden={use_waveform}
 	controls
 	autoplay={waveform_settings.autoplay}
 	on:load
@@ -215,7 +225,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 +248,6 @@
 			</div>
 		</div>
 
-		<!-- {#if waveform} -->
 		<WaveformControls
 			{container}
 			{waveform}
@@ -256,7 +265,6 @@
 			{trim_region_settings}
 			{editable}
 		/>
-		<!-- {/if} -->
 	</div>
 {/if}
 

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;
 	}

js/audio/static/StaticAudio.svelte

@@ -21,8 +21,11 @@
 	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,
+		show_controls: false
+	};
 	export let editable = true;
 	export let loop: boolean;
 	export let display_icon_button_wrapper_top_corner = false;

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

js/multimodaltextbox/shared/MultimodalTextbox.svelte

@@ -54,7 +54,10 @@
 	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,
+		show_controls: false
+	};
 	export let sources: ["microphone" | "upload"] = ["upload"];
 	export let active_source: "microphone" | null = null;
 	let upload_component: Upload;