Add loop parameters to gr.Audio and gr.Video (#8806)

* add loop

* changes

* add changeset

* audio player

* fix tests

* test audio

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/cyan-cycles-yawn.md

@@ -0,0 +1,7 @@
+---
+"@gradio/audio": minor
+"@gradio/video": minor
+"gradio": minor
+---
+
+feat:Add `loop` parameters to `gr.Audio` and `gr.Video`

gradio/components/audio.py

@@ -102,6 +102,7 @@ class Audio(
         min_length: int | None = None,
         max_length: int | None = None,
         waveform_options: WaveformOptions | dict | None = None,
+        loop: bool = False,
     ):
         """
         Parameters:
@@ -130,6 +131,7 @@ class Audio(
             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), trim_region_color (str). Default is None, which uses the default values for these options. [See `gr.WaveformOptions` docs](#waveform-options).
+            loop: If True, the audio will loop when it reaches the end and continue playing from the beginning.
         """
         valid_sources: list[Literal["upload", "microphone"]] = ["upload", "microphone"]
         if sources is None:
@@ -160,6 +162,7 @@ class Audio(
             )
         self.format = format
         self.autoplay = autoplay
+        self.loop = loop
         self.show_download_button = show_download_button
         self.show_share_button = (
             (utils.get_space() is not None)

gradio/components/video.py

@@ -88,6 +88,7 @@ class Video(Component):
         show_download_button: bool | None = None,
         min_length: int | None = None,
         max_length: int | None = None,
+        loop: bool = False,
     ):
         """
         Parameters:
@@ -116,6 +117,7 @@ class Video(Component):
             show_download_button: If True, will show a download icon in the corner of the component that allows user to download the output. If False, icon does not appear. By default, it will be True for output components and False for input components.
             min_length: The minimum length of video (in seconds) that the user can pass into the prediction function. If None, there is no minimum length.
             max_length: The maximum length of video (in seconds) that the user can pass into the prediction function. If None, there is no maximum length.
+            loop: If True, the video will loop when it reaches the end and continue playing from the beginning.
         """
         valid_sources: list[Literal["upload", "webcam"]] = ["upload", "webcam"]
         if sources is None:
@@ -137,6 +139,7 @@ class Video(Component):
         self.autoplay = autoplay
         self.height = height
         self.width = width
+        self.loop = loop
         self.mirror_webcam = mirror_webcam
         self.include_audio = (
             include_audio if include_audio is not None else "upload" in self.sources

gradio/templates.py

@@ -368,6 +368,7 @@ class PlayableVideo(components.Video):
         show_download_button: bool | None = None,
         min_length: int | None = None,
         max_length: int | None = None,
+        loop: bool = False,
     ):
         sources = ["upload"]
         super().__init__(
@@ -396,6 +397,7 @@ class PlayableVideo(components.Video):
             show_download_button=show_download_button,
             min_length=min_length,
             max_length=max_length,
+            loop=loop,
         )
 
 
@@ -437,6 +439,7 @@ class Microphone(components.Audio):
         min_length: int | None = None,
         max_length: int | None = None,
         waveform_options: WaveformOptions | dict | None = None,
+        loop: bool = False,
     ):
         sources = ["microphone"]
         super().__init__(
@@ -465,6 +468,7 @@ class Microphone(components.Audio):
             min_length=min_length,
             max_length=max_length,
             waveform_options=waveform_options,
+            loop=loop,
         )
 
 

js/audio/Index.svelte

@@ -30,6 +30,7 @@
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
 	export let autoplay = false;
+	export let loop = false;
 	export let show_download_button: boolean;
 	export let show_share_button = false;
 	export let editable = true;
@@ -162,6 +163,7 @@
 			{show_share_button}
 			{value}
 			{label}
+			{loop}
 			{waveform_settings}
 			{waveform_options}
 			{editable}
@@ -207,6 +209,7 @@
 			{active_source}
 			{pending}
 			{streaming}
+			{loop}
 			max_file_size={gradio.max_file_size}
 			{handle_reset_value}
 			{editable}

js/audio/interactive/InteractiveAudio.svelte

@@ -16,6 +16,7 @@
 	export let value: null | FileData = null;
 	export let label: string;
 	export let root: string;
+	export let loop: boolean;
 	export let show_label = true;
 	export let show_download_button = false;
 	export let sources:
@@ -276,6 +277,7 @@
 			{trim_region_settings}
 			{handle_reset_value}
 			{editable}
+			{loop}
 			interactive
 			on:stop
 			on:play

js/audio/player/AudioPlayer.svelte

@@ -25,6 +25,7 @@
 	export let waveform_settings: Record<string, any>;
 	export let waveform_options: WaveformOptions;
 	export let mode = "";
+	export let loop: boolean;
 	export let handle_reset_value: () => void = () => {};
 
 	let container: HTMLDivElement;
@@ -87,8 +88,12 @@
 	});
 
 	$: waveform?.on("finish", () => {
-		playing = false;
-		dispatch("stop");
+		if (loop) {
+			waveform?.play();
+		} else {
+			playing = false;
+			dispatch("stop");
+		}
 	});
 	$: waveform?.on("pause", () => {
 		playing = false;
@@ -154,6 +159,7 @@
 		src={value.url}
 		controls
 		autoplay={waveform_settings.autoplay}
+		{loop}
 		on:load
 	/>
 {:else}

js/audio/static/StaticAudio.svelte

@@ -19,6 +19,7 @@
 	export let waveform_settings: Record<string, any>;
 	export let waveform_options: WaveformOptions;
 	export let editable = true;
+	export let loop: boolean;
 
 	const dispatch = createEventDispatcher<{
 		change: FileData;
@@ -67,6 +68,7 @@
 		{waveform_settings}
 		{waveform_options}
 		{editable}
+		{loop}
 		on:pause
 		on:play
 		on:stop

js/video/Example.svelte

@@ -6,6 +6,7 @@
 	export let type: "gallery" | "table";
 	export let selected = false;
 	export let value: { video: FileData; subtitles: FileData | null } | null;
+	export let loop: boolean;
 	let video: HTMLVideoElement;
 
 	async function init(): Promise<void> {
@@ -35,6 +36,7 @@
 				on:mouseover={video.play.bind(video)}
 				on:mouseout={video.pause.bind(video)}
 				src={value?.video.url}
+				{loop}
 			/>
 		</div>
 	{:else}

js/video/Index.svelte

@@ -53,6 +53,7 @@
 	export let interactive: boolean;
 	export let mirror_webcam: boolean;
 	export let include_audio: boolean;
+	export let loop = false;
 
 	let _video: FileData | null = null;
 	let _subtitle: FileData | null = null;
@@ -147,6 +148,7 @@
 			{label}
 			{show_label}
 			{autoplay}
+			{loop}
 			{show_share_button}
 			{show_download_button}
 			on:play={() => gradio.dispatch("play")}
@@ -196,6 +198,7 @@
 			{include_audio}
 			{autoplay}
 			{root}
+			{loop}
 			{handle_reset_value}
 			on:clear={() => gradio.dispatch("clear")}
 			on:play={() => gradio.dispatch("play")}

js/video/shared/InteractiveVideo.svelte

@@ -31,6 +31,7 @@
 	export let max_file_size: number | null = null;
 	export let upload: Client["upload"];
 	export let stream_handler: Client["stream"];
+	export let loop: boolean;
 
 	const dispatch = createEventDispatcher<{
 		change: FileData | null;
@@ -126,6 +127,7 @@
 					{label}
 					{handle_change}
 					{handle_reset_value}
+					{loop}
 				/>
 			{/key}
 		{:else if value.size}

js/video/shared/Player.svelte

@@ -12,6 +12,7 @@
 	export let subtitle: string | null = null;
 	export let mirror: boolean;
 	export let autoplay: boolean;
+	export let loop: boolean;
 	export let label = "test";
 	export let interactive = false;
 	export let handle_change: (video: FileData) => void = () => {};
@@ -96,6 +97,7 @@
 			{src}
 			preload="auto"
 			{autoplay}
+			{loop}
 			on:click={play_pause}
 			on:play
 			on:pause

js/video/shared/Video.svelte

@@ -18,6 +18,7 @@
 	export let paused: boolean | undefined = undefined;
 
 	export let node: HTMLVideoElement | undefined = undefined;
+	export let loop: boolean;
 
 	export let processingVideo = false;
 
@@ -66,6 +67,7 @@ Then, even when `controls` is false, the compiled DOM would be `<video controls=
 	{preload}
 	{autoplay}
 	{controls}
+	{loop}
 	on:loadeddata={dispatch.bind(null, "loadeddata")}
 	on:click={dispatch.bind(null, "click")}
 	on:play={dispatch.bind(null, "play")}

js/video/shared/VideoPreview.svelte

@@ -16,6 +16,7 @@
 	export let autoplay: boolean;
 	export let show_share_button = true;
 	export let show_download_button = true;
+	export let loop: boolean;
 	export let i18n: I18nFormatter;
 	export let upload: Client["upload"];
 
@@ -65,6 +66,7 @@
 			on:load
 			mirror={false}
 			{label}
+			{loop}
 			interactive={false}
 			{upload}
 		/>

test/components/test_audio.py

@@ -69,6 +69,7 @@ class TestAudio:
             },
             "_selectable": False,
             "key": None,
+            "loop": False,
         }
         assert audio_input.preprocess(None) is None
 
@@ -124,6 +125,7 @@ class TestAudio:
             },
             "_selectable": False,
             "key": None,
+            "loop": False,
         }
 
         output1 = audio_output.postprocess(y_audio.name).model_dump()

test/components/test_video.py

@@ -67,6 +67,7 @@ class TestVideo:
             "max_length": None,
             "_selectable": False,
             "key": None,
+            "loop": False,
         }
         assert video_input.preprocess(None) is None
         video_input = gr.Video(format="avi")