From f096c3ae168c0df00f90fe131c1e48c572e0574b Mon Sep 17 00:00:00 2001
From: Hannah <hannahblair@users.noreply.github.com>
Date: Wed, 4 Oct 2023 20:31:00 +0100
Subject: [PATCH] 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  |  7 +++++++
 js/app/src/lang/en.json           |  3 ++-
 js/audio/audio.test.ts            | 35 +++++++++++++++++++++++++++++++
 js/audio/interactive/Audio.svelte |  8 +++++++
 4 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/mighty-beans-shake.md
 create mode 100644 js/audio/audio.test.ts

diff --git a/.changeset/mighty-beans-shake.md b/.changeset/mighty-beans-shake.md
new file mode 100644
index 000000000000..5434d548aabd
--- /dev/null
+++ b/.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
diff --git a/js/app/src/lang/en.json b/js/app/src/lang/en.json
index 7f828a31fb99..c292d1869b34 100644
--- a/js/app/src/lang/en.json
+++ b/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.",
diff --git a/js/audio/audio.test.ts b/js/audio/audio.test.ts
new file mode 100644
index 000000000000..fcc0a8bddb63
--- /dev/null
+++ b/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"));
+	});
+});
diff --git a/js/audio/interactive/Audio.svelte b/js/audio/interactive/Audio.svelte
index 98222a353b41..513a5236b68b 100644
--- a/js/audio/interactive/Audio.svelte
+++ b/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();