Throw helpful error when media devices are not found (#5794)

* add test

* add changeset

* tweak copy

* error logic

* add changeset

* copy tweak

---------

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

.changeset/mighty-beans-shake.md

@@ -0,0 +1,7 @@
+---
+"@gradio/app": patch
+"@gradio/audio": patch
+"gradio": patch
+---
+
+fix:Throw helpful error when media devices are not found

js/app/src/lang/en.json

@@ -9,7 +9,8 @@
 		"allow_recording_access": "Please allow access to the microphone for recording.",
 		"audio": "Audio",
 		"record_from_microphone": "Record from microphone",
-		"stop_recording": "Stop recording"
+		"stop_recording": "Stop recording",
+		"no_device_support": "Media devices could not be accessed. Check that you are running on a secure origin (https) or localhost (or you have passed a valid SSL certificate to ssl_verify), and you have allowed browser access to your device."
 	},
 	"blocks": {
 		"connection_can_break": "On mobile, the connection can break if this tab is unfocused or the device sleeps, losing your position in queue.",

js/audio/audio.test.ts

@@ -0,0 +1,35 @@
+import { test, describe, assert, afterEach } from "vitest";
+import { cleanup, render } from "@gradio/tootils";
+import Audio from "./static";
+import type { LoadingStatus } from "@gradio/statustracker";
+import { setupi18n } from "../app/src/i18n";
+
+const loading_status: LoadingStatus = {
+	eta: 0,
+	queue_position: 1,
+	queue_size: 1,
+	status: "complete",
+	scroll_to_output: false,
+	visible: true,
+	fn_index: 0,
+	show_progress: "full"
+};
+
+describe("Audio", () => {
+	setupi18n();
+
+	afterEach(() => cleanup());
+
+	test("renders audio component", async () => {
+		const { getAllByTestId } = await render(Audio, {
+			loading_status,
+			label: "music",
+			value: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
+			root: "",
+			root_url: "",
+			theme_mode: "dark"
+		});
+
+		assert.exists(getAllByTestId("music-audio"));
+	});
+});

js/audio/interactive/Audio.svelte

@@ -104,6 +104,10 @@
 		try {
 			stream = await navigator.mediaDevices.getUserMedia({ audio: true });
 		} catch (err) {
+			if (!navigator.mediaDevices) {
+				dispatch("error", $_("audio.no_device_support"));
+				return;
+			}
 			if (err instanceof DOMException && err.name == "NotAllowedError") {
 				dispatch("error", $_("audio.allow_recording_access"));
 				return;
@@ -167,6 +171,10 @@
 	}
 
 	async function record(): Promise<void> {
+		if (!navigator.mediaDevices) {
+			dispatch("error", $_("audio.no_device_support"));
+			return;
+		}
 		recording = true;
 		dispatch("start_recording");
 		if (!inited) await prepare_audio();