Hide the waveform when playing recorded audio if `show_recording_waveform` is `False` #10405

abidlabs · 2025-01-22T03:58:53Z

For large audio files, its useful to provide a way to use the default browser controls to reduce latency and memory consumption.

Closes: #6801

Test all the reasonable combinations:

import gradio as gr

with gr.Blocks() as demo:
    gr.Audio(
        sources=["microphone"],
        waveform_options=gr.WaveformOptions(
            show_recording_waveform=True,
            show_controls=True,
        ),
    )
    gr.Audio(
        sources=["microphone"],
        waveform_options=gr.WaveformOptions(
            show_recording_waveform=True,
            show_controls=False,
        ),
    )
    gr.Audio(
        sources=["microphone"],
        waveform_options=gr.WaveformOptions(
            show_recording_waveform=False,
            show_controls=True,
        ),
    )
    gr.Audio(
        sources=["microphone"],
        waveform_options=gr.WaveformOptions(
            show_recording_waveform=True,
        ),
    )
    gr.Audio(
        sources=["microphone"],
        waveform_options=gr.WaveformOptions(
            show_recording_waveform=False,
        ),
    )

demo.launch()

gradio-pr-bot · 2025-01-22T03:59:30Z

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	building...
	Storybook	ready!	Storybook preview
🦄	Changes	detected!	Details

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/1dcf118600dc276755104f02df520cb39df6ec30/gradio-5.13.0-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@1dcf118600dc276755104f02df520cb39df6ec30#subdirectory=client/python"

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/1dcf118600dc276755104f02df520cb39df6ec30/gradio-client-1.10.0.tgz

Use Lite from this PR

<script type="module" src="https://gradio-lite-previews.s3.amazonaws.com/1dcf118600dc276755104f02df520cb39df6ec30/dist/lite.js""></script>

gradio-pr-bot · 2025-01-22T03:59:39Z

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
`@gradio/audio`	`patch`
`@gradio/chatbot`	`patch`
`@gradio/multimodaltextbox`	`patch`
`gradio`	`patch`

Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Hide the waveform when playing recorded audio if show_recording_waveform is False

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

Maintainers can change the version label to modify the version bump.
If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

…o into show_recording_waveform

abidlabs · 2025-01-22T04:09:16Z

gradio/components/audio.py

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


I think this is the most sensible way to handle the case when show_recording_waveform=False without adding a new parameter.

abidlabs · 2025-01-22T04:13:45Z

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 = {


Added to preserve behavior for unit tests

abidlabs · 2025-01-22T04:14:46Z

js/audio/shared/WaveformRecordControls.svelte

@@ -195,6 +195,10 @@
 		border: 1px solid var(--block-border-color);
 	}

+	.duration-button {


Just a styling tweak for consistency:

abidlabs · 2025-01-22T06:55:13Z

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 = {


waveform_options and waveform_settings shouldn't even be props here, but when I started refactoring this, the PR quickly got out of hand. Will refactor the audio out of multimodaltextbox here in a separate PR

We should add waveform_options as a param to multimodaltextbox.

dawoodkhan82

Tested all combinations and look good to me.

One small nit: when both show_controls and show_recording_waveform areTrue, when changing the playback speed on one, it doesn't show the new playback speed on the others' controls.

dawoodkhan82 · 2025-01-23T19:35:54Z

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 = {


We should add waveform_options as a param to multimodaltextbox.

dawoodkhan82 · 2025-01-23T19:44:59Z

Also not sure when anyone would have both show_controls and show_recording_waveform set to True. Should we even allow both to show. Or maybe just default to one and ignore the other.

abidlabs · 2025-01-23T22:01:00Z

Thanks @dawoodkhan82, good points, I'll just deprecate show_controls. If show_recording_waveform=True, then the waveform shows, if its False, the default controls show. That should address both points.

abidlabs · 2025-01-24T03:13:33Z

Ok made the change, thanks @dawoodkhan82!

changes

47922de

add changeset

1582fe4

abidlabs added 5 commits January 21, 2025 19:59

revert

5122ffc

Merge branch 'show_recording_waveform' of github.com:gradio-app/gradi…

3d4799a

…o into show_recording_waveform

changes

14d0b94

format

9ab7076

story

008455f

abidlabs commented Jan 22, 2025

View reviewed changes

abidlabs requested review from pngwn, hannahblair, aliabid94 and dawoodkhan82 January 22, 2025 04:09

abidlabs commented Jan 22, 2025

View reviewed changes

abidlabs force-pushed the show_recording_waveform branch from 79794df to 9922b12 Compare January 22, 2025 06:30

test

00f3622

abidlabs force-pushed the show_recording_waveform branch from a0cdd44 to 00f3622 Compare January 22, 2025 06:35

changes

16770c2

abidlabs force-pushed the show_recording_waveform branch from a0a92fe to 16770c2 Compare January 22, 2025 06:36

gradio-pr-bot and others added 2 commits January 22, 2025 06:37

add changeset

c890ce8

changes

e76e5a2

abidlabs commented Jan 22, 2025

View reviewed changes

abidlabs marked this pull request as ready for review January 23, 2025 18:41

dawoodkhan82 approved these changes Jan 23, 2025

View reviewed changes

Merge branch 'main' into show_recording_waveform

057626a

abidlabs added the v: patch A change that requires a patch release label Jan 24, 2025

abidlabs added 5 commits January 23, 2025 18:06

Merge branch 'main' into show_recording_waveform

4f99540

changees

4ed9161

changes

3c365c5

changes

2652006

format

1dcf118

abidlabs merged commit 92dda15 into main Jan 24, 2025
23 checks passed

abidlabs deleted the show_recording_waveform branch January 24, 2025 03:13

gradio-pr-bot mentioned this pull request Jan 24, 2025

chore: update versions #10417

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hide the waveform when playing recorded audio if `show_recording_waveform` is `False` #10405

Hide the waveform when playing recorded audio if `show_recording_waveform` is `False` #10405

abidlabs commented Jan 22, 2025 •

edited

Loading

gradio-pr-bot commented Jan 22, 2025 •

edited

Loading

gradio-pr-bot commented Jan 22, 2025 •

edited

Loading

Something isn't right?

abidlabs Jan 22, 2025

abidlabs Jan 22, 2025

abidlabs Jan 22, 2025

abidlabs Jan 22, 2025 •

edited

Loading

dawoodkhan82 Jan 23, 2025

dawoodkhan82 left a comment •

edited

Loading

dawoodkhan82 Jan 23, 2025

dawoodkhan82 commented Jan 23, 2025

abidlabs commented Jan 23, 2025

abidlabs commented Jan 24, 2025

Hide the waveform when playing recorded audio if show_recording_waveform is False #10405

Hide the waveform when playing recorded audio if show_recording_waveform is False #10405

Conversation

abidlabs commented Jan 22, 2025 • edited Loading

gradio-pr-bot commented Jan 22, 2025 • edited Loading

🪼 branch checks and previews

gradio-pr-bot commented Jan 22, 2025 • edited Loading

🦄 change detected

This Pull Request includes changes to the following packages.

With the following changelog entry.

Something isn't right?

abidlabs Jan 22, 2025

Choose a reason for hiding this comment

abidlabs Jan 22, 2025

Choose a reason for hiding this comment

abidlabs Jan 22, 2025

Choose a reason for hiding this comment

abidlabs Jan 22, 2025 • edited Loading

Choose a reason for hiding this comment

dawoodkhan82 Jan 23, 2025

Choose a reason for hiding this comment

dawoodkhan82 left a comment • edited Loading

Choose a reason for hiding this comment

dawoodkhan82 Jan 23, 2025

Choose a reason for hiding this comment

dawoodkhan82 commented Jan 23, 2025

abidlabs commented Jan 23, 2025

abidlabs commented Jan 24, 2025

Hide the waveform when playing recorded audio if `show_recording_waveform` is `False` #10405

Hide the waveform when playing recorded audio if `show_recording_waveform` is `False` #10405

abidlabs commented Jan 22, 2025 •

edited

Loading

gradio-pr-bot commented Jan 22, 2025 •

edited

Loading

gradio-pr-bot commented Jan 22, 2025 •

edited

Loading

abidlabs Jan 22, 2025 •

edited

Loading

dawoodkhan82 left a comment •

edited

Loading