Improve default source behaviour in Audio (#6314)

* change audio param docs and switch default to `upload`

* amend selected source icon colour

* add changeset

* tweak

* add changeset

---------

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

.changeset/polite-views-wear.md

@@ -0,0 +1,6 @@
+---
+"@gradio/atoms": patch
+"gradio": patch
+---
+
+fix:Improve default source behaviour in Audio

gradio/components/audio.py

@@ -85,7 +85,7 @@ def __init__(
         """
         Parameters:
             value: A path, URL, or [sample_rate, numpy array] tuple (sample rate in Hz, audio data as a float or int numpy array) for the default value that Audio component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component.
-            sources: A list of sources permitted for audio. "upload" creates a box where user can drop an audio file, "microphone" creates a microphone input. If None, defaults to ["upload", "microphone"], or ["microphone"] if `streaming` is True.
+            sources: A list of sources permitted for audio. "upload" creates a box where user can drop an audio file, "microphone" creates a microphone input. The first element in the list will be used as the default source. If None, defaults to ["upload", "microphone"], or ["microphone"] if `streaming` is True.
             type: The format the audio file is converted to before being passed into the prediction function. "numpy" converts the audio to a tuple consisting of: (int sample rate, numpy.array for the data), "filepath" passes a str path to a temporary file containing the audio.
             label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
             every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
@@ -107,7 +107,7 @@ def __init__(
             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). Default is None, which uses the default values for these options.
         """
-        valid_sources: list[Literal["upload", "microphone"]] = ["microphone", "upload"]
+        valid_sources: list[Literal["upload", "microphone"]] = ["upload", "microphone"]
 
         if sources is None:
             sources = ["microphone"] if streaming else valid_sources

js/atoms/src/SelectSource.svelte

@@ -11,6 +11,7 @@
 		{#if sources.includes("upload")}
 			<button
 				class="icon"
+				class:selected={active_source === "upload"}
 				aria-label="Upload file"
 				on:click={() => {
 					handle_clear();
@@ -22,6 +23,7 @@
 		{#if sources.includes("microphone")}
 			<button
 				class="icon"
+				class:selected={active_source === "microphone"}
 				aria-label="Record audio"
 				on:click={() => {
 					handle_clear();
@@ -33,6 +35,7 @@
 		{#if sources.includes("webcam")}
 			<button
 				class="icon"
+				class:selected={active_source === "webcam"}
 				aria-label="Record video"
 				on:click={() => {
 					handle_clear();
@@ -67,6 +70,10 @@
 		border-radius: var(--radius-md);
 	}
 
+	.selected {
+		color: var(--color-accent);
+	}
+
 	.icon:hover,
 	.icon:focus {
 		color: var(--color-accent);