diff --git a/.changeset/red-ties-turn.md b/.changeset/red-ties-turn.md
new file mode 100644
index 0000000000..2935a04e4a
--- /dev/null
+++ b/.changeset/red-ties-turn.md
@@ -0,0 +1,6 @@
+---
+"@gradio/audio": minor
+"gradio": minor
+---
+
+feat:Fix audio streaming output issues in 4.0
diff --git a/js/audio/player/AudioPlayer.svelte b/js/audio/player/AudioPlayer.svelte
index 123f6d9bd3..756dc3efe3 100644
--- a/js/audio/player/AudioPlayer.svelte
+++ b/js/audio/player/AudioPlayer.svelte
@@ -10,6 +10,7 @@
 	import type { FileData } from "@gradio/client";
 
 	export let value: null | FileData = null;
+	$: url = value?.url;
 	export let label: string;
 	export let i18n: I18nFormatter;
 	export let dispatch: (event: any, detail?: any) => void;
@@ -18,12 +19,12 @@
 		event: "stream" | "change" | "stop_recording"
 	) => Promise<void> = () => Promise.resolve();
 	export let interactive = false;
-	export let waveform_settings = {};
+	export let waveform_settings: Record<string, any> = {};
 	export let mode = "";
 	export let handle_reset_value: () => void = () => {};
 
 	let container: HTMLDivElement;
-	let waveform: WaveSurfer;
+	let waveform: WaveSurfer | undefined;
 	let playing = false;
 
 	let timeRef: HTMLTimeElement;
@@ -84,12 +85,12 @@
 		end: number
 	): Promise<void> => {
 		mode = "";
-		const decodedData = waveform.getDecodedData();
+		const decodedData = waveform?.getDecodedData();
 		if (decodedData)
 			await process_audio(decodedData, start, end).then(
 				async (trimmedBlob: Uint8Array) => {
 					await dispatch_blob([trimmedBlob], "change");
-					waveform.destroy();
+					waveform?.destroy();
 					create_waveform();
 				}
 			);
@@ -98,15 +99,16 @@
 
 	async function load_audio(data: string): Promise<void> {
 		await resolve_wasm_src(data).then((resolved_src) => {
-			if (!resolved_src) return;
+			if (!resolved_src || value?.is_stream) return;
 			return waveform?.load(resolved_src);
 		});
 	}
 
-	$: value?.url && load_audio(value.url);
+	$: url && load_audio(url);
 
 	onMount(() => {
 		window.addEventListener("keydown", (e) => {
+			if (!waveform) return;
 			if (e.key === "ArrowRight" && mode !== "edit") {
 				skipAudio(waveform, 0.1);
 			} else if (e.key === "ArrowLeft" && mode !== "edit") {
@@ -120,6 +122,13 @@
 	<Empty size="small">
 		<Music />
 	</Empty>
+{:else if value.is_stream}
+	<audio
+		class="standard-player"
+		src={value.url}
+		controls
+		autoplay={waveform_settings.autoplay}
+	/>
 {:else}
 	<div
 		class="component-wrapper"
@@ -195,4 +204,9 @@
 		height: 100%;
 		position: relative;
 	}
+
+	.standard-player {
+		width: 100%;
+		padding: var(--size-2);
+	}
 </style>