diff --git a/.changeset/afraid-things-raise.md b/.changeset/afraid-things-raise.md
new file mode 100644
index 0000000000000..996d76cbf3d2c
--- /dev/null
+++ 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
index 0b7fba7d577d9..2445181c00a43 100644
--- 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
index ed571a07b3b53..b64c6b00133e8 100644
--- a/js/audio/Audio.stories.svelte
+++ b/js/audio/Audio.stories.svelte
@@ -33,6 +33,21 @@
}}
/>
+
+
();
+ $: 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 @@