From 571e473df7f9943671235724b784d96079dd1af4 Mon Sep 17 00:00:00 2001
From: Sander <mail@sanderboer.nl>
Date: Wed, 10 Dec 2025 08:41:38 +0100
Subject: [PATCH 1/2] init audio

---
 apps/electron-app/index.html                  |   1 +
 apps/electron-app/src/common/nodes.ts         |   2 +
 .../nodes/AudioPlayer/AudioFileEditor.tsx     | 327 ++++++++++++++++++
 .../nodes/AudioPlayer/AudioPlayer.tsx         |  95 +++++
 packages/runtime/index.ts                     |   1 +
 packages/runtime/package.json                 |   1 +
 .../runtime/src/audioplayer/audioplayer.ts    | 166 +++++++++
 .../src/audioplayer/audioplayer.types.ts      |  14 +
 yarn.lock                                     |  19 +
 9 files changed, 626 insertions(+)
 create mode 100644 apps/electron-app/src/render/components/react-flow/nodes/AudioPlayer/AudioFileEditor.tsx
 create mode 100644 apps/electron-app/src/render/components/react-flow/nodes/AudioPlayer/AudioPlayer.tsx
 create mode 100644 packages/runtime/src/audioplayer/audioplayer.ts
 create mode 100644 packages/runtime/src/audioplayer/audioplayer.types.ts

diff --git a/apps/electron-app/index.html b/apps/electron-app/index.html
index a09a0d5f..51d88243 100644
--- a/apps/electron-app/index.html
+++ b/apps/electron-app/index.html
@@ -13,6 +13,7 @@
 				style-src 'self' 'unsafe-inline';
 				connect-src 'self' https://*.trycloudflare.com wss: ws: http: https:;
 				img-src 'self' data:;
+				media-src 'self' blob:;
 			"
 		/>
 		<style>
diff --git a/apps/electron-app/src/common/nodes.ts b/apps/electron-app/src/common/nodes.ts
index be5607a1..9d6559bc 100644
--- a/apps/electron-app/src/common/nodes.ts
+++ b/apps/electron-app/src/common/nodes.ts
@@ -34,6 +34,7 @@ import { Switch } from '../render/components/react-flow/nodes/Switch';
 import { Proximity } from '../render/components/react-flow/nodes/Proximity';
 import { Llm } from '../render/components/react-flow/nodes/Llm';
 import { Hotkey } from '../render/components/react-flow/nodes/Hotkey';
+import { AudioPlayer } from '../render/components/react-flow/nodes/AudioPlayer/AudioPlayer';
 import { Node } from '@xyflow/react';
 
 export function isNodeTypeACodeType(node?: Node) {
@@ -80,6 +81,7 @@ export const NODE_TYPES: Record<string, (props: any) => JSX.Element> = {
 	Trigger: Trigger,
 	Vibration: Vibration,
 	Hotkey: Hotkey,
+	AudioPlayer: AudioPlayer,
 } as const;
 
 export type NodeType = keyof typeof NODE_TYPES;
diff --git a/apps/electron-app/src/render/components/react-flow/nodes/AudioPlayer/AudioFileEditor.tsx b/apps/electron-app/src/render/components/react-flow/nodes/AudioPlayer/AudioFileEditor.tsx
new file mode 100644
index 00000000..5296d97f
--- /dev/null
+++ b/apps/electron-app/src/render/components/react-flow/nodes/AudioPlayer/AudioFileEditor.tsx
@@ -0,0 +1,327 @@
+import {
+	Badge,
+	Button,
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	Empty,
+	EmptyContent,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	Item,
+	ItemActions,
+	ItemContent,
+	ItemDescription,
+	ItemTitle,
+} from '@microflow/ui';
+import { useState, useRef, useEffect } from 'react';
+import { Icons } from '@microflow/ui';
+
+export function AudioFileEditor(props: Props) {
+	const [editedFiles, setEditedFiles] = useState<string[]>(props.audioFiles);
+	const fileInputRef = useRef<HTMLInputElement>(null);
+	const [playingIndex, setPlayingIndex] = useState<number | null>(null);
+	const audioRef = useRef<HTMLAudioElement | null>(null);
+	const blobUrlRef = useRef<string | null>(null);
+
+	const handleAddFiles = () => {
+		fileInputRef.current?.click();
+	};
+
+	const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+		const files = event.target.files;
+		if (!files || files.length === 0) return;
+
+		const fileArray = Array.from(files);
+		const dataUrls: string[] = [];
+		let loadedCount = 0;
+
+		fileArray.forEach(file => {
+			const reader = new FileReader();
+			reader.onload = e => {
+				if (e.target?.result) {
+					dataUrls.push(e.target.result as string);
+					loadedCount++;
+					// Update edited files when all files are loaded
+					if (loadedCount === fileArray.length) {
+						setEditedFiles(prev => [...prev, ...dataUrls]);
+					}
+				}
+			};
+			reader.readAsDataURL(file);
+		});
+
+		// Reset input so the same file can be selected again
+		if (fileInputRef.current) {
+			fileInputRef.current.value = '';
+		}
+	};
+
+	const getFileName = (dataUrl: string, index: number) => {
+		const fileName = `Audio file ${index + 1}`;
+		try {
+			const matches = dataUrl.match(/^data:audio\/([^;]+);base64,(.+)$/);
+			if (matches) {
+				const mimeType = matches[1].toUpperCase();
+				return { fileName, mimeType };
+			}
+			return { fileName, mimeType: 'unknown' };
+		} catch {
+			return { fileName, mimeType: 'unknown' };
+		}
+	};
+
+	const handlePlayPause = (index: number, dataUrl: string) => {
+		// If clicking the same audio that's playing, pause it
+		if (playingIndex === index && audioRef.current) {
+			audioRef.current.pause();
+			setPlayingIndex(null);
+			audioRef.current = null;
+			// Clean up blob URL
+			if (blobUrlRef.current) {
+				URL.revokeObjectURL(blobUrlRef.current);
+				blobUrlRef.current = null;
+			}
+			return;
+		}
+
+		// Stop any currently playing audio
+		if (audioRef.current) {
+			audioRef.current.pause();
+			audioRef.current = null;
+		}
+
+		// Clean up previous blob URL
+		if (blobUrlRef.current) {
+			URL.revokeObjectURL(blobUrlRef.current);
+			blobUrlRef.current = null;
+		}
+
+		// Try to play the audio - use data URL directly (most reliable)
+		const playAudio = (url: string, mimeType: string, isBlob: boolean = false) => {
+			const cleanup = () => {
+				setPlayingIndex(null);
+				audioRef.current = null;
+				if (isBlob && blobUrlRef.current) {
+					URL.revokeObjectURL(blobUrlRef.current);
+					blobUrlRef.current = null;
+				}
+			};
+
+			const audio = new Audio();
+			audioRef.current = audio;
+			setPlayingIndex(index);
+
+			// Set up event handlers before setting src
+			audio.onended = () => {
+				cleanup();
+			};
+
+			audio.onerror = e => {
+				const error = audio.error;
+				console.error('Error playing audio:', {
+					error: error?.code,
+					message: error?.message,
+					mimeType,
+					urlType: isBlob ? 'blob' : 'data',
+					readyState: audio.readyState,
+				});
+				cleanup();
+			};
+
+			// Fallback timeout in case canplay doesn't fire
+			let timeout: NodeJS.Timeout | null = null;
+
+			audio.oncanplay = () => {
+				if (timeout) {
+					clearTimeout(timeout);
+					timeout = null;
+				}
+				// Audio is ready to play
+				audio.play().catch(error => {
+					console.error('Error calling play():', error);
+					cleanup();
+				});
+			};
+
+			// Set the source and let it load
+			audio.src = url;
+			audio.load();
+
+			// Fallback: if canplay doesn't fire, try playing after a short delay
+			timeout = setTimeout(() => {
+				if (audio.readyState >= 2 && audio.paused) {
+					audio.play().catch(error => {
+						console.error('Error playing audio (timeout fallback):', error);
+						cleanup();
+					});
+				}
+			}, 500);
+		};
+
+		// Electron blocks data URLs in media elements for security
+		// We need to convert to blob URL instead
+		try {
+			// Parse the data URL
+			const dataUrlMatch = dataUrl.match(/^data:([^;]+)(;base64)?,(.+)$/);
+			if (!dataUrlMatch) {
+				console.error('Invalid data URL format');
+				return;
+			}
+
+			const mimeType = dataUrlMatch[1];
+			const isBase64 = dataUrlMatch[2] === ';base64';
+			const data = dataUrlMatch[3];
+
+			if (!isBase64) {
+				console.error('Data URL is not base64 encoded');
+				return;
+			}
+
+			// Convert base64 to binary
+			const binaryString = atob(data);
+			const arrayBuffer = new ArrayBuffer(binaryString.length);
+			const bytes = new Uint8Array(arrayBuffer);
+			for (let i = 0; i < binaryString.length; i++) {
+				bytes[i] = binaryString.charCodeAt(i);
+			}
+
+			// Create blob and blob URL
+			const blob = new Blob([bytes], { type: mimeType });
+			const blobUrl = URL.createObjectURL(blob);
+			blobUrlRef.current = blobUrl;
+
+			// Play using blob URL (required for Electron)
+			playAudio(blobUrl, mimeType, true);
+		} catch (error) {
+			console.error('Error converting data URL to blob:', error);
+		}
+	};
+
+	// Cleanup audio on unmount
+	useEffect(() => {
+		return () => {
+			if (audioRef.current) {
+				audioRef.current.pause();
+				audioRef.current = null;
+			}
+			if (blobUrlRef.current) {
+				URL.revokeObjectURL(blobUrlRef.current);
+				blobUrlRef.current = null;
+			}
+		};
+	}, []);
+
+	return (
+		<Dialog
+			open={true}
+			onOpenChange={open => {
+				if (!open) {
+					// Stop any playing audio when closing
+					if (audioRef.current) {
+						audioRef.current.pause();
+						audioRef.current = null;
+					}
+					if (blobUrlRef.current) {
+						URL.revokeObjectURL(blobUrlRef.current);
+						blobUrlRef.current = null;
+					}
+					setPlayingIndex(null);
+					props.onClose();
+				}
+			}}
+		>
+			<DialogContent className='max-w-2xl'>
+				<DialogHeader>
+					<DialogTitle>Manage Audio Files</DialogTitle>
+				</DialogHeader>
+				<section className='flex flex-col space-y-4'>
+					<input
+						ref={fileInputRef}
+						type='file'
+						accept='audio/*'
+						multiple
+						style={{ display: 'none' }}
+						onChange={handleFileSelect}
+					/>
+
+					<div className='space-y-2 max-h-96 overflow-y-auto'>
+						{editedFiles.map((dataUrl, index) => (
+							<Item variant='outline' key={index}>
+								<ItemContent>
+									<ItemTitle>{getFileName(dataUrl, index).fileName}</ItemTitle>
+									<ItemDescription>{getFileName(dataUrl, index).mimeType}</ItemDescription>
+								</ItemContent>
+								<ItemActions>
+									<Button
+										variant='outline'
+										size='sm'
+										onClick={() => handlePlayPause(index, dataUrl)}
+									>
+										{playingIndex === index ? <Icons.Pause size={16} /> : <Icons.Play size={16} />}
+									</Button>
+									<Button
+										variant='destructive'
+										size='sm'
+										onClick={() => {
+											setEditedFiles(prev => prev.filter((_, i) => i !== index));
+										}}
+									>
+										<Icons.Trash2 size={16} />
+									</Button>
+								</ItemActions>
+							</Item>
+						))}
+					</div>
+					{editedFiles.length === 0 && (
+						<Empty>
+							<EmptyHeader>
+								<EmptyMedia variant='icon'>
+									<Icons.Music2Icon />
+								</EmptyMedia>
+								<EmptyDescription>No audio files selected</EmptyDescription>
+							</EmptyHeader>
+						</Empty>
+					)}
+
+					<Button variant='ghost' onClick={handleAddFiles} className='w-full'>
+						<Icons.Plus size={16} />
+						Add Audio Files
+					</Button>
+				</section>
+				<DialogFooter>
+					<Button
+						variant='destructive'
+						onClick={() => {
+							setEditedFiles([]);
+						}}
+						disabled={editedFiles.length === 0}
+					>
+						Clear All
+					</Button>
+					<DialogClose asChild>
+						<Button
+							onClick={() => {
+								props.onSave({
+									audioFiles: editedFiles,
+								});
+							}}
+						>
+							Save
+						</Button>
+					</DialogClose>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+type Props = {
+	audioFiles: string[];
+	onSave: (data: { audioFiles: string[] }) => void;
+	onClose: () => void;
+};
diff --git a/apps/electron-app/src/render/components/react-flow/nodes/AudioPlayer/AudioPlayer.tsx b/apps/electron-app/src/render/components/react-flow/nodes/AudioPlayer/AudioPlayer.tsx
new file mode 100644
index 00000000..4de78e08
--- /dev/null
+++ b/apps/electron-app/src/render/components/react-flow/nodes/AudioPlayer/AudioPlayer.tsx
@@ -0,0 +1,95 @@
+import {
+	type Data,
+	type Value,
+	dataSchema,
+} from '@microflow/runtime/src/audioplayer/audioplayer.types';
+import { Position } from '@xyflow/react';
+import { useState } from 'react';
+import { Handle } from '../../Handle';
+import { BaseNode, NodeContainer, useNodeControls, useNodeData, useNodeId } from '../Node';
+import { useNodeValue } from '../../../../stores/node-data';
+import { button } from 'leva';
+import { AudioFileEditor } from './AudioFileEditor';
+import { IconWithValue } from '../../IconWithValue';
+
+export function AudioPlayer(props: Props) {
+	return (
+		<NodeContainer {...props}>
+			<Value />
+			<Settings />
+			<Handle type='target' position={Position.Left} id='play' offset={-0.5} />
+			<Handle type='target' position={Position.Left} id='stop' offset={0.5} />
+		</NodeContainer>
+	);
+}
+
+function Value() {
+	const data = useNodeData<Data>();
+	const isPlaying = useNodeValue<Value>(false);
+
+	return (
+		<IconWithValue
+			icon={isPlaying ? 'Volume2' : 'VolumeOff'}
+			value={data.audioFiles.length}
+			suffix=' files'
+			iconClassName={isPlaying ? 'animate-pulse text-green-500' : 'text-muted-foreground'}
+		/>
+	);
+}
+
+function Settings() {
+	const data = useNodeData<Data>();
+	const [editorOpened, setEditorOpened] = useState(false);
+	const { render, setNodeData } = useNodeControls<Data>(
+		{
+			volume: {
+				value: data.volume ?? 1,
+				min: 0,
+				max: 1,
+				step: 0.1,
+				label: 'volume',
+			},
+			loop: {
+				value: data.loop ?? false,
+				label: 'loop',
+			},
+			'manage files': button(() => {
+				setEditorOpened(true);
+			}),
+		},
+		[]
+	);
+
+	return (
+		<>
+			{render()}
+			{editorOpened && (
+				<AudioFileEditor
+					audioFiles={data.audioFiles}
+					onClose={() => {
+						setEditorOpened(false);
+					}}
+					onSave={newData => {
+						setNodeData({
+							...data,
+							audioFiles: newData.audioFiles,
+						});
+						setEditorOpened(false);
+					}}
+				/>
+			)}
+		</>
+	);
+}
+
+type Props = BaseNode<Data>;
+AudioPlayer.defaultProps = {
+	data: {
+		...dataSchema.parse({}),
+		group: 'flow',
+		tags: ['output', 'event'],
+		label: 'Audio Player',
+		icon: 'MusicIcon',
+		description: 'Select and play audio files from your device',
+	} satisfies Props['data'],
+};
diff --git a/packages/runtime/index.ts b/packages/runtime/index.ts
index 7ec9c21c..afba3f77 100644
--- a/packages/runtime/index.ts
+++ b/packages/runtime/index.ts
@@ -27,4 +27,5 @@ export * from './src/smooth/smooth';
 export * from './src/switch/switch';
 export * from './src/trigger/trigger';
 export * from './src/hotkey/hotkey';
+export * from './src/audioplayer/audioplayer';
 export { Board } from 'johnny-five';
diff --git a/packages/runtime/package.json b/packages/runtime/package.json
index f2c09831..fe8bc036 100644
--- a/packages/runtime/package.json
+++ b/packages/runtime/package.json
@@ -18,6 +18,7 @@
 		"johnny-five": "https://github.com/xiduzo/johnny-five.git",
 		"langchain": "^0.3.19",
 		"node-pixel": "^0.11.0",
+		"play-sound": "^1.1.6",
 		"zod": "^4.1.13"
 	}
 }
diff --git a/packages/runtime/src/audioplayer/audioplayer.ts b/packages/runtime/src/audioplayer/audioplayer.ts
new file mode 100644
index 00000000..26800751
--- /dev/null
+++ b/packages/runtime/src/audioplayer/audioplayer.ts
@@ -0,0 +1,166 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as os from 'os';
+import { transformValueToBoolean, transformValueToNumber } from '../_utils/transformUnknownValues';
+import { Code } from '../base';
+import type { Data, Value } from './audioplayer.types';
+import { dataSchema } from './audioplayer.types';
+
+// Lazy load play-sound to avoid issues if not installed
+let player: any = null;
+function getPlayer() {
+	if (!player) {
+		try {
+			player = require('play-sound')({});
+		} catch (error) {
+			console.error('Failed to load play-sound:', error);
+			return null;
+		}
+	}
+	return player;
+}
+
+export class AudioPlayer extends Code<Value, Data> {
+	private currentProcess: any = null;
+	private tempFiles: string[] = [];
+	private currentFileIndex: number = 0;
+
+	constructor(data: Data) {
+		super(dataSchema.parse(data), false);
+		// Create temp files for all audio files upfront
+		this.createAllTempFiles();
+	}
+
+	private decodeDataUrl(dataUrl: string): { buffer: Buffer; extension: string } | null {
+		try {
+			// Parse data URL: data:audio/mp3;base64,<base64data>
+			const matches = dataUrl.match(/^data:audio\/([^;]+);base64,(.+)$/);
+			if (!matches) {
+				console.error('Invalid data URL format');
+				return null;
+			}
+
+			const mimeType = matches[1];
+			const base64Data = matches[2];
+			const buffer = Buffer.from(base64Data, 'base64');
+
+			// Map MIME types to file extensions
+			const extensionMap: Record<string, string> = {
+				mp3: 'mp3',
+				wav: 'wav',
+				ogg: 'ogg',
+				m4a: 'm4a',
+				aac: 'aac',
+				flac: 'flac',
+			};
+
+			const extension = extensionMap[mimeType.toLowerCase()] || 'mp3';
+			return { buffer, extension };
+		} catch (error) {
+			console.error('Error decoding data URL:', error);
+			return null;
+		}
+	}
+
+	private createTempFile(dataUrl: string): string | null {
+		const decoded = this.decodeDataUrl(dataUrl);
+		if (!decoded) return null;
+
+		try {
+			const tempDir = os.tmpdir();
+			const tempFileName = `audioplayer-${this.id}-${Date.now()}-${Math.random().toString(36).substring(7)}.${decoded.extension}`;
+			const tempFilePath = path.join(tempDir, tempFileName);
+
+			fs.writeFileSync(tempFilePath, decoded.buffer);
+			return tempFilePath;
+		} catch (error) {
+			console.error('Error creating temp file:', error);
+			return null;
+		}
+	}
+
+	private createAllTempFiles() {
+		this.tempFiles = this.data.audioFiles
+			.map(dataUrl => this.createTempFile(dataUrl))
+			.filter((filePath): filePath is string => filePath !== null);
+	}
+
+	private cleanupTempFiles() {
+		this.tempFiles.forEach(filePath => {
+			try {
+				if (fs.existsSync(filePath)) {
+					fs.unlinkSync(filePath);
+				}
+			} catch (error) {
+				console.error(`Error deleting temp file ${filePath}:`, error);
+			}
+		});
+		this.tempFiles = [];
+	}
+
+	play(index?: unknown) {
+		if (this.tempFiles.length === 0) return;
+
+		// Stop any currently playing audio
+		this.stop();
+
+		// If index is provided, use it; otherwise default to 1 (first file)
+		// Matrix/Pixel use 1-based indexing, so we subtract 1 to get array index
+		const fileIndex = index !== undefined ? Math.round(transformValueToNumber(index) - 1) : 0;
+
+		// Store the current file index for looping
+		this.currentFileIndex = fileIndex;
+
+		const tempFilePath = this.tempFiles.at(fileIndex);
+		if (!tempFilePath) {
+			console.error(`No temp file found for index ${fileIndex}`);
+			return;
+		}
+
+		const audioPlayer = getPlayer();
+		if (!audioPlayer) {
+			console.error('Audio player not available');
+			return;
+		}
+
+		this.value = true;
+
+		// Play the audio file
+		this.currentProcess = audioPlayer.play(tempFilePath, (err: Error | null) => {
+			if (err) {
+				console.error('Error playing audio:', err);
+				this.value = false;
+				return;
+			}
+
+			// Audio finished playing
+			this.value = false;
+
+			// Handle looping - replay the same file index
+			if (this.data.loop) {
+				setTimeout(() => {
+					this.play(this.currentFileIndex + 1); // Use 1-based index for play()
+				}, 100);
+			}
+		});
+	}
+
+	stop() {
+		if (this.currentProcess) {
+			try {
+				this.currentProcess.kill();
+			} catch (error) {
+				console.error('Error stopping audio:', error);
+			}
+			this.currentProcess = null;
+		}
+
+		this.value = false;
+	}
+
+	destroy() {
+		this.stop();
+		this.cleanupTempFiles();
+		super.destroy();
+	}
+}
diff --git a/packages/runtime/src/audioplayer/audioplayer.types.ts b/packages/runtime/src/audioplayer/audioplayer.types.ts
new file mode 100644
index 00000000..21848a9d
--- /dev/null
+++ b/packages/runtime/src/audioplayer/audioplayer.types.ts
@@ -0,0 +1,14 @@
+import { z } from 'zod';
+import { baseDataSchema } from '../base.types';
+
+export const valueSchema = z.boolean();
+export type Value = z.infer<typeof valueSchema>;
+
+export const dataSchema = baseDataSchema.extend({
+	instance: z.literal('AudioPlayer').default('AudioPlayer'),
+	audioFiles: z.array(z.string()).default([]), // Array of data URLs
+	loop: z.boolean().default(false),
+	volume: z.number().min(0).max(1).default(1),
+});
+
+export type Data = z.infer<typeof dataSchema>;
diff --git a/yarn.lock b/yarn.lock
index 527755a2..52eb8dfe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2508,6 +2508,7 @@ __metadata:
     johnny-five: "https://github.com/xiduzo/johnny-five.git"
     langchain: ^0.3.19
     node-pixel: ^0.11.0
+    play-sound: ^1.1.6
     typescript: 5.8.3
     zod: ^4.1.13
   languageName: unknown
@@ -10410,6 +10411,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"find-exec@npm:1.0.3":
+  version: 1.0.3
+  resolution: "find-exec@npm:1.0.3"
+  dependencies:
+    shell-quote: ^1.8.1
+  checksum: 6be934f01a8f0728e6d29de4eb74470c8577f9d31c3d4bda752a3f0fb13ddfab7ba82d0e6d814b7792bf5fc2b5faf05fd5079e5ae5643aa75876e3fd22e03815
+  languageName: node
+  linkType: hard
+
 "find-up@npm:^2.0.0":
   version: 2.1.0
   resolution: "find-up@npm:2.1.0"
@@ -15265,6 +15275,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"play-sound@npm:^1.1.6":
+  version: 1.1.6
+  resolution: "play-sound@npm:1.1.6"
+  dependencies:
+    find-exec: 1.0.3
+  checksum: 3a974a9a48e3639f54ba15acf29b8935537532a3e219444a97ce8cab49de0064d5735f9ca64e6a83ef4ca7cbecbd0a0b83db7c6c0495e047e332fed81316dc89
+  languageName: node
+  linkType: hard
+
 "plist@npm:^3.0.0, plist@npm:^3.0.5, plist@npm:^3.1.0":
   version: 3.1.0
   resolution: "plist@npm:3.1.0"

From f33f2123bd77f9d9c2fc4d35708effa67844f333 Mon Sep 17 00:00:00 2001
From: Sander <mail@sanderboer.nl>
Date: Wed, 10 Dec 2025 19:34:31 +0100
Subject: [PATCH 2/2] feat: audio playback

---
 apps/electron-app/index.html                  |   2 +-
 apps/electron-app/src/main/file.ts            |  28 +++
 apps/electron-app/src/main/ipc.ts             |  12 +-
 apps/electron-app/src/main/window.ts          |   2 +-
 apps/electron-app/src/preload.ts              |   8 +-
 .../nodes/AudioPlayer/AudioFileEditor.tsx     | 211 +++++++-----------
 .../nodes/AudioPlayer/AudioPlayer.tsx         |   2 +-
 packages/runtime/package.json                 |   1 +
 .../runtime/src/audioplayer/audioplayer.ts    | 160 +++----------
 .../src/audioplayer/audioplayer.types.ts      |   2 +-
 yarn.lock                                     |  10 +
 11 files changed, 174 insertions(+), 264 deletions(-)

diff --git a/apps/electron-app/index.html b/apps/electron-app/index.html
index 51d88243..b966cb08 100644
--- a/apps/electron-app/index.html
+++ b/apps/electron-app/index.html
@@ -13,7 +13,7 @@
 				style-src 'self' 'unsafe-inline';
 				connect-src 'self' https://*.trycloudflare.com wss: ws: http: https:;
 				img-src 'self' data:;
-				media-src 'self' blob:;
+				media-src 'self' blob: file:;
 			"
 		/>
 		<style>
diff --git a/apps/electron-app/src/main/file.ts b/apps/electron-app/src/main/file.ts
index 5aa57d82..a25a4260 100644
--- a/apps/electron-app/src/main/file.ts
+++ b/apps/electron-app/src/main/file.ts
@@ -48,3 +48,31 @@ export async function importFlow(): Promise<FlowState | null> {
 		});
 	});
 }
+
+export async function selectAudioFiles(): Promise<string[]> {
+	const result = await dialog.showOpenDialog({
+		title: 'Select Audio Files',
+		filters: [
+			{ name: 'Audio files', extensions: ['mp3', 'wav', 'ogg', 'm4a', 'aac', 'flac'] },
+			{ name: 'All files', extensions: ['*'] },
+		],
+		properties: ['openFile', 'multiSelections'],
+	});
+
+	if (result.canceled || !result.filePaths) {
+		return [];
+	}
+
+	return result.filePaths;
+}
+
+export async function readAudioFile(filePath: string): Promise<Buffer> {
+	return new Promise<Buffer>((resolve, reject) => {
+		fs.readFile(filePath, (err, data) => {
+			if (err) {
+				return reject(err);
+			}
+			resolve(data);
+		});
+	});
+}
diff --git a/apps/electron-app/src/main/ipc.ts b/apps/electron-app/src/main/ipc.ts
index 4c818bbd..022ca83c 100644
--- a/apps/electron-app/src/main/ipc.ts
+++ b/apps/electron-app/src/main/ipc.ts
@@ -3,7 +3,7 @@ import { app, ipcMain, Menu } from 'electron';
 import { mainWindowReady } from './window';
 
 import log from 'electron-log/node';
-import { exportFlow } from './file';
+import { exportFlow, selectAudioFiles, readAudioFile } from './file';
 import { ensureRunnerProcess, getRunnerProcess, killRunnerProcess } from './board-connection';
 import { checkConnectedPort, setupUSBDeviceListeners, stopPortPolling } from './port-manager';
 import { Timer } from './utils';
@@ -51,6 +51,16 @@ ipcMain.on('ipc-external-value', (_event, data: { nodeId: string; value: unknown
 	runnerProcess?.send({ type: 'setExternal', nodeId: data.nodeId, value: data.value });
 });
 
+ipcMain.handle('ipc-select-audio-files', async () => {
+	return await selectAudioFiles();
+});
+
+ipcMain.handle('ipc-read-audio-file', async (_event, filePath: string) => {
+	const buffer = await readAudioFile(filePath);
+	// Convert buffer to base64 for transmission
+	return buffer.toString('base64');
+});
+
 killRunnerProcess().catch(log.debug);
 
 app.on('before-quit', async event => {
diff --git a/apps/electron-app/src/main/window.ts b/apps/electron-app/src/main/window.ts
index 4dbe7186..b6ecee84 100644
--- a/apps/electron-app/src/main/window.ts
+++ b/apps/electron-app/src/main/window.ts
@@ -50,7 +50,7 @@ export function handleSecondInstance(commandLine: string[]) {
 export async function recreateWindowWhenNeeded() {
 	if (windows.length === 0) {
 		await createWindow();
-		await new Promise(resolve => setTimeout(resolve, 500));
+		await new Promise(resolve => setTimeout(resolve, 250));
 	}
 
 	return Promise.resolve();
diff --git a/apps/electron-app/src/preload.ts b/apps/electron-app/src/preload.ts
index bc791506..c08b70c3 100644
--- a/apps/electron-app/src/preload.ts
+++ b/apps/electron-app/src/preload.ts
@@ -13,7 +13,9 @@ export type Channels =
 	| 'ipc-deep-link'
 	| 'ipc-export-flow'
 	| 'ipc-flow'
-	| 'ipc-board';
+	| 'ipc-board'
+	| 'ipc-select-audio-files'
+	| 'ipc-read-audio-file';
 
 type IpcCallback<Data> = (response: IpcResponse<Data>) => void;
 type Listener = (event: IpcRendererEvent, response: IpcResponse<any>) => void;
@@ -54,6 +56,10 @@ export const electronHandler = {
 			console.debug('[IPC] <once>', channel);
 			ipcRenderer.once(channel, (_event, args) => callback(args));
 		},
+		invoke<Data>(channel: Channels, data?: Data): Promise<any> {
+			logger.debug('[IPC] <invoke>', channel, data);
+			return ipcRenderer.invoke(channel, data);
+		},
 	},
 	os: {
 		isMac: process.platform === 'darwin',
diff --git a/apps/electron-app/src/render/components/react-flow/nodes/AudioPlayer/AudioFileEditor.tsx b/apps/electron-app/src/render/components/react-flow/nodes/AudioPlayer/AudioFileEditor.tsx
index 5296d97f..b1f04848 100644
--- a/apps/electron-app/src/render/components/react-flow/nodes/AudioPlayer/AudioFileEditor.tsx
+++ b/apps/electron-app/src/render/components/react-flow/nodes/AudioPlayer/AudioFileEditor.tsx
@@ -1,5 +1,4 @@
 import {
-	Badge,
 	Button,
 	Dialog,
 	DialogClose,
@@ -8,7 +7,6 @@ import {
 	DialogHeader,
 	DialogTitle,
 	Empty,
-	EmptyContent,
 	EmptyDescription,
 	EmptyHeader,
 	EmptyMedia,
@@ -23,69 +21,56 @@ import { Icons } from '@microflow/ui';
 
 export function AudioFileEditor(props: Props) {
 	const [editedFiles, setEditedFiles] = useState<string[]>(props.audioFiles);
-	const fileInputRef = useRef<HTMLInputElement>(null);
 	const [playingIndex, setPlayingIndex] = useState<number | null>(null);
 	const audioRef = useRef<HTMLAudioElement | null>(null);
-	const blobUrlRef = useRef<string | null>(null);
 
-	const handleAddFiles = () => {
-		fileInputRef.current?.click();
+	const handleAddFiles = async () => {
+		try {
+			const filePaths = await window.electron.ipcRenderer.invoke('ipc-select-audio-files');
+			if (filePaths && filePaths.length > 0) {
+				setEditedFiles(prev => [...prev, ...filePaths]);
+			}
+		} catch (error) {
+			console.error('Error selecting audio files:', error);
+		}
 	};
 
-	const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
-		const files = event.target.files;
-		if (!files || files.length === 0) return;
-
-		const fileArray = Array.from(files);
-		const dataUrls: string[] = [];
-		let loadedCount = 0;
+	const getFileName = (filePath: string, index: number) => {
+		try {
+			// Extract file name from path
+			const pathParts = filePath.split(/[/\\]/);
+			const fileNameWithExt = pathParts[pathParts.length - 1] || `Audio file ${index + 1}`;
 
-		fileArray.forEach(file => {
-			const reader = new FileReader();
-			reader.onload = e => {
-				if (e.target?.result) {
-					dataUrls.push(e.target.result as string);
-					loadedCount++;
-					// Update edited files when all files are loaded
-					if (loadedCount === fileArray.length) {
-						setEditedFiles(prev => [...prev, ...dataUrls]);
-					}
-				}
+			// Extract extension to determine mime type
+			const extension = fileNameWithExt.split('.').pop()?.toLowerCase() || '';
+			const mimeTypeMap: Record<string, string> = {
+				mp3: 'MP3',
+				wav: 'WAV',
+				ogg: 'OGG',
+				m4a: 'M4A',
+				aac: 'AAC',
+				flac: 'FLAC',
 			};
-			reader.readAsDataURL(file);
-		});
+			const mimeType = mimeTypeMap[extension] || extension.toUpperCase() || 'UNKNOWN';
 
-		// Reset input so the same file can be selected again
-		if (fileInputRef.current) {
-			fileInputRef.current.value = '';
-		}
-	};
+			// Remove extension from fileName
+			const fileName =
+				extension && fileNameWithExt.endsWith(`.${extension}`)
+					? fileNameWithExt.slice(0, -(extension.length + 1))
+					: fileNameWithExt;
 
-	const getFileName = (dataUrl: string, index: number) => {
-		const fileName = `Audio file ${index + 1}`;
-		try {
-			const matches = dataUrl.match(/^data:audio\/([^;]+);base64,(.+)$/);
-			if (matches) {
-				const mimeType = matches[1].toUpperCase();
-				return { fileName, mimeType };
-			}
-			return { fileName, mimeType: 'unknown' };
+			return { fileName, mimeType };
 		} catch {
-			return { fileName, mimeType: 'unknown' };
+			return { fileName: `Audio file ${index + 1}`, mimeType: 'UNKNOWN' };
 		}
 	};
 
-	const handlePlayPause = (index: number, dataUrl: string) => {
+	const handlePlayPause = async (index: number, filePath: string) => {
 		// If clicking the same audio that's playing, pause it
 		if (playingIndex === index && audioRef.current) {
 			audioRef.current.pause();
 			setPlayingIndex(null);
 			audioRef.current = null;
-			// Clean up blob URL
-			if (blobUrlRef.current) {
-				URL.revokeObjectURL(blobUrlRef.current);
-				blobUrlRef.current = null;
-			}
 			return;
 		}
 
@@ -95,22 +80,43 @@ export function AudioFileEditor(props: Props) {
 			audioRef.current = null;
 		}
 
-		// Clean up previous blob URL
-		if (blobUrlRef.current) {
-			URL.revokeObjectURL(blobUrlRef.current);
-			blobUrlRef.current = null;
-		}
+		let blobUrl: string | null = null;
 
-		// Try to play the audio - use data URL directly (most reliable)
-		const playAudio = (url: string, mimeType: string, isBlob: boolean = false) => {
-			const cleanup = () => {
-				setPlayingIndex(null);
-				audioRef.current = null;
-				if (isBlob && blobUrlRef.current) {
-					URL.revokeObjectURL(blobUrlRef.current);
-					blobUrlRef.current = null;
-				}
+		const cleanup = () => {
+			if (blobUrl) {
+				URL.revokeObjectURL(blobUrl);
+				blobUrl = null;
+			}
+			setPlayingIndex(null);
+			audioRef.current = null;
+		};
+
+		try {
+			// Read file via IPC and create blob URL
+			const base64Data = await window.electron.ipcRenderer.invoke('ipc-read-audio-file', filePath);
+
+			// Convert base64 to binary
+			const binaryString = atob(base64Data);
+			const bytes = new Uint8Array(binaryString.length);
+			for (let i = 0; i < binaryString.length; i++) {
+				bytes[i] = binaryString.charCodeAt(i);
+			}
+
+			// Determine MIME type from file extension
+			const extension = filePath.split('.').pop()?.toLowerCase() || '';
+			const mimeTypeMap: Record<string, string> = {
+				mp3: 'audio/mpeg',
+				wav: 'audio/wav',
+				ogg: 'audio/ogg',
+				m4a: 'audio/mp4',
+				aac: 'audio/aac',
+				flac: 'audio/flac',
 			};
+			const mimeType = mimeTypeMap[extension] || 'audio/mpeg';
+
+			// Create blob and blob URL
+			const blob = new Blob([bytes], { type: mimeType });
+			blobUrl = URL.createObjectURL(blob);
 
 			const audio = new Audio();
 			audioRef.current = audio;
@@ -123,11 +129,10 @@ export function AudioFileEditor(props: Props) {
 
 			audio.onerror = e => {
 				const error = audio.error;
-				console.error('Error playing audio:', {
+				console.warn('Error playing audio:', {
 					error: error?.code,
 					message: error?.message,
-					mimeType,
-					urlType: isBlob ? 'blob' : 'data',
+					filePath,
 					readyState: audio.readyState,
 				});
 				cleanup();
@@ -143,62 +148,27 @@ export function AudioFileEditor(props: Props) {
 				}
 				// Audio is ready to play
 				audio.play().catch(error => {
-					console.error('Error calling play():', error);
+					console.warn('Error calling play():', error);
 					cleanup();
 				});
 			};
 
 			// Set the source and let it load
-			audio.src = url;
+			audio.src = blobUrl;
 			audio.load();
 
 			// Fallback: if canplay doesn't fire, try playing after a short delay
 			timeout = setTimeout(() => {
 				if (audio.readyState >= 2 && audio.paused) {
 					audio.play().catch(error => {
-						console.error('Error playing audio (timeout fallback):', error);
+						console.warn('Error playing audio (timeout fallback):', { error });
 						cleanup();
 					});
 				}
 			}, 500);
-		};
-
-		// Electron blocks data URLs in media elements for security
-		// We need to convert to blob URL instead
-		try {
-			// Parse the data URL
-			const dataUrlMatch = dataUrl.match(/^data:([^;]+)(;base64)?,(.+)$/);
-			if (!dataUrlMatch) {
-				console.error('Invalid data URL format');
-				return;
-			}
-
-			const mimeType = dataUrlMatch[1];
-			const isBase64 = dataUrlMatch[2] === ';base64';
-			const data = dataUrlMatch[3];
-
-			if (!isBase64) {
-				console.error('Data URL is not base64 encoded');
-				return;
-			}
-
-			// Convert base64 to binary
-			const binaryString = atob(data);
-			const arrayBuffer = new ArrayBuffer(binaryString.length);
-			const bytes = new Uint8Array(arrayBuffer);
-			for (let i = 0; i < binaryString.length; i++) {
-				bytes[i] = binaryString.charCodeAt(i);
-			}
-
-			// Create blob and blob URL
-			const blob = new Blob([bytes], { type: mimeType });
-			const blobUrl = URL.createObjectURL(blob);
-			blobUrlRef.current = blobUrl;
-
-			// Play using blob URL (required for Electron)
-			playAudio(blobUrl, mimeType, true);
 		} catch (error) {
-			console.error('Error converting data URL to blob:', error);
+			console.warn('Error reading audio file:', error);
+			cleanup();
 		}
 	};
 
@@ -207,12 +177,12 @@ export function AudioFileEditor(props: Props) {
 		return () => {
 			if (audioRef.current) {
 				audioRef.current.pause();
+				// Revoke any blob URLs
+				if (audioRef.current.src && audioRef.current.src.startsWith('blob:')) {
+					URL.revokeObjectURL(audioRef.current.src);
+				}
 				audioRef.current = null;
 			}
-			if (blobUrlRef.current) {
-				URL.revokeObjectURL(blobUrlRef.current);
-				blobUrlRef.current = null;
-			}
 		};
 	}, []);
 
@@ -224,12 +194,12 @@ export function AudioFileEditor(props: Props) {
 					// Stop any playing audio when closing
 					if (audioRef.current) {
 						audioRef.current.pause();
+						// Revoke any blob URLs
+						if (audioRef.current.src && audioRef.current.src.startsWith('blob:')) {
+							URL.revokeObjectURL(audioRef.current.src);
+						}
 						audioRef.current = null;
 					}
-					if (blobUrlRef.current) {
-						URL.revokeObjectURL(blobUrlRef.current);
-						blobUrlRef.current = null;
-					}
 					setPlayingIndex(null);
 					props.onClose();
 				}
@@ -240,27 +210,18 @@ export function AudioFileEditor(props: Props) {
 					<DialogTitle>Manage Audio Files</DialogTitle>
 				</DialogHeader>
 				<section className='flex flex-col space-y-4'>
-					<input
-						ref={fileInputRef}
-						type='file'
-						accept='audio/*'
-						multiple
-						style={{ display: 'none' }}
-						onChange={handleFileSelect}
-					/>
-
 					<div className='space-y-2 max-h-96 overflow-y-auto'>
-						{editedFiles.map((dataUrl, index) => (
+						{editedFiles.map((filePath, index) => (
 							<Item variant='outline' key={index}>
 								<ItemContent>
-									<ItemTitle>{getFileName(dataUrl, index).fileName}</ItemTitle>
-									<ItemDescription>{getFileName(dataUrl, index).mimeType}</ItemDescription>
+									<ItemTitle>{getFileName(filePath, index).fileName}</ItemTitle>
+									<ItemDescription>{getFileName(filePath, index).mimeType}</ItemDescription>
 								</ItemContent>
 								<ItemActions>
 									<Button
 										variant='outline'
 										size='sm'
-										onClick={() => handlePlayPause(index, dataUrl)}
+										onClick={() => handlePlayPause(index, filePath)}
 									>
 										{playingIndex === index ? <Icons.Pause size={16} /> : <Icons.Play size={16} />}
 									</Button>
diff --git a/apps/electron-app/src/render/components/react-flow/nodes/AudioPlayer/AudioPlayer.tsx b/apps/electron-app/src/render/components/react-flow/nodes/AudioPlayer/AudioPlayer.tsx
index 4de78e08..a3dc4c4e 100644
--- a/apps/electron-app/src/render/components/react-flow/nodes/AudioPlayer/AudioPlayer.tsx
+++ b/apps/electron-app/src/render/components/react-flow/nodes/AudioPlayer/AudioPlayer.tsx
@@ -32,7 +32,7 @@ function Value() {
 			icon={isPlaying ? 'Volume2' : 'VolumeOff'}
 			value={data.audioFiles.length}
 			suffix=' files'
-			iconClassName={isPlaying ? 'animate-pulse text-green-500' : 'text-muted-foreground'}
+			iconClassName={isPlaying ? 'text-green-500' : 'text-muted-foreground'}
 		/>
 	);
 }
diff --git a/packages/runtime/package.json b/packages/runtime/package.json
index fe8bc036..37a21a78 100644
--- a/packages/runtime/package.json
+++ b/packages/runtime/package.json
@@ -10,6 +10,7 @@
 	"devDependencies": {
 		"@types/johnny-five": "2.1.10",
 		"@types/node-pixel": "^0.11.2",
+		"@types/play-sound": "^1.1.2",
 		"typescript": "5.8.3"
 	},
 	"dependencies": {
diff --git a/packages/runtime/src/audioplayer/audioplayer.ts b/packages/runtime/src/audioplayer/audioplayer.ts
index 26800751..c5d50fcb 100644
--- a/packages/runtime/src/audioplayer/audioplayer.ts
+++ b/packages/runtime/src/audioplayer/audioplayer.ts
@@ -1,166 +1,60 @@
 import * as fs from 'fs';
-import * as path from 'path';
-import * as os from 'os';
-import { transformValueToBoolean, transformValueToNumber } from '../_utils/transformUnknownValues';
+import { transformValueToNumber } from '../_utils/transformUnknownValues';
 import { Code } from '../base';
 import type { Data, Value } from './audioplayer.types';
 import { dataSchema } from './audioplayer.types';
-
-// Lazy load play-sound to avoid issues if not installed
-let player: any = null;
-function getPlayer() {
-	if (!player) {
-		try {
-			player = require('play-sound')({});
-		} catch (error) {
-			console.error('Failed to load play-sound:', error);
-			return null;
-		}
-	}
-	return player;
-}
+import player from 'play-sound';
+import { ChildProcess } from 'child_process';
 
 export class AudioPlayer extends Code<Value, Data> {
-	private currentProcess: any = null;
-	private tempFiles: string[] = [];
-	private currentFileIndex: number = 0;
+	private currentProcess: ChildProcess | null = null;
+	private readonly audioPlayer = player();
+	private playId = 0;
 
 	constructor(data: Data) {
 		super(dataSchema.parse(data), false);
-		// Create temp files for all audio files upfront
-		this.createAllTempFiles();
 	}
 
-	private decodeDataUrl(dataUrl: string): { buffer: Buffer; extension: string } | null {
-		try {
-			// Parse data URL: data:audio/mp3;base64,<base64data>
-			const matches = dataUrl.match(/^data:audio\/([^;]+);base64,(.+)$/);
-			if (!matches) {
-				console.error('Invalid data URL format');
-				return null;
-			}
-
-			const mimeType = matches[1];
-			const base64Data = matches[2];
-			const buffer = Buffer.from(base64Data, 'base64');
-
-			// Map MIME types to file extensions
-			const extensionMap: Record<string, string> = {
-				mp3: 'mp3',
-				wav: 'wav',
-				ogg: 'ogg',
-				m4a: 'm4a',
-				aac: 'aac',
-				flac: 'flac',
-			};
-
-			const extension = extensionMap[mimeType.toLowerCase()] || 'mp3';
-			return { buffer, extension };
-		} catch (error) {
-			console.error('Error decoding data URL:', error);
-			return null;
-		}
-	}
-
-	private createTempFile(dataUrl: string): string | null {
-		const decoded = this.decodeDataUrl(dataUrl);
-		if (!decoded) return null;
-
-		try {
-			const tempDir = os.tmpdir();
-			const tempFileName = `audioplayer-${this.id}-${Date.now()}-${Math.random().toString(36).substring(7)}.${decoded.extension}`;
-			const tempFilePath = path.join(tempDir, tempFileName);
-
-			fs.writeFileSync(tempFilePath, decoded.buffer);
-			return tempFilePath;
-		} catch (error) {
-			console.error('Error creating temp file:', error);
-			return null;
-		}
-	}
+	play(index?: unknown) {
+		const filePath = this.data.audioFiles.at(Math.round(transformValueToNumber(index) - 1));
+		if (!filePath) return;
 
-	private createAllTempFiles() {
-		this.tempFiles = this.data.audioFiles
-			.map(dataUrl => this.createTempFile(dataUrl))
-			.filter((filePath): filePath is string => filePath !== null);
+		this.playTrack(filePath);
 	}
 
-	private cleanupTempFiles() {
-		this.tempFiles.forEach(filePath => {
-			try {
-				if (fs.existsSync(filePath)) {
-					fs.unlinkSync(filePath);
-				}
-			} catch (error) {
-				console.error(`Error deleting temp file ${filePath}:`, error);
-			}
-		});
-		this.tempFiles = [];
-	}
+	private playTrack(filePath: string) {
+		if (!fs.existsSync(filePath)) return;
 
-	play(index?: unknown) {
-		if (this.tempFiles.length === 0) return;
-
-		// Stop any currently playing audio
 		this.stop();
 
-		// If index is provided, use it; otherwise default to 1 (first file)
-		// Matrix/Pixel use 1-based indexing, so we subtract 1 to get array index
-		const fileIndex = index !== undefined ? Math.round(transformValueToNumber(index) - 1) : 0;
-
-		// Store the current file index for looping
-		this.currentFileIndex = fileIndex;
-
-		const tempFilePath = this.tempFiles.at(fileIndex);
-		if (!tempFilePath) {
-			console.error(`No temp file found for index ${fileIndex}`);
-			return;
-		}
-
-		const audioPlayer = getPlayer();
-		if (!audioPlayer) {
-			console.error('Audio player not available');
-			return;
-		}
-
 		this.value = true;
+		const currentPlayId = ++this.playId;
 
-		// Play the audio file
-		this.currentProcess = audioPlayer.play(tempFilePath, (err: Error | null) => {
-			if (err) {
-				console.error('Error playing audio:', err);
-				this.value = false;
-				return;
-			}
-
-			// Audio finished playing
-			this.value = false;
+		this.currentProcess = this.audioPlayer.play(filePath, err => {
+			if (currentPlayId === this.playId) this.value = false;
+			if (err) return;
+			if (!this.data.loop) return;
+			if (currentPlayId !== this.playId) return;
 
-			// Handle looping - replay the same file index
-			if (this.data.loop) {
-				setTimeout(() => {
-					this.play(this.currentFileIndex + 1); // Use 1-based index for play()
-				}, 100);
-			}
+			setTimeout(() => {
+				this.playTrack(filePath);
+			}, 0);
 		});
 	}
 
 	stop() {
-		if (this.currentProcess) {
-			try {
-				this.currentProcess.kill();
-			} catch (error) {
-				console.error('Error stopping audio:', error);
-			}
+		try {
+			this.currentProcess?.kill();
+		} catch (error) {
+			console.error(error);
+		} finally {
 			this.currentProcess = null;
+			this.value = false;
 		}
-
-		this.value = false;
 	}
 
 	destroy() {
 		this.stop();
-		this.cleanupTempFiles();
 		super.destroy();
 	}
 }
diff --git a/packages/runtime/src/audioplayer/audioplayer.types.ts b/packages/runtime/src/audioplayer/audioplayer.types.ts
index 21848a9d..61972aea 100644
--- a/packages/runtime/src/audioplayer/audioplayer.types.ts
+++ b/packages/runtime/src/audioplayer/audioplayer.types.ts
@@ -6,7 +6,7 @@ export type Value = z.infer<typeof valueSchema>;
 
 export const dataSchema = baseDataSchema.extend({
 	instance: z.literal('AudioPlayer').default('AudioPlayer'),
-	audioFiles: z.array(z.string()).default([]), // Array of data URLs
+	audioFiles: z.array(z.string()).default([]).describe('Array of file paths'),
 	loop: z.boolean().default(false),
 	volume: z.number().min(0).max(1).default(1),
 });
diff --git a/yarn.lock b/yarn.lock
index 52eb8dfe..49187f7a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2505,6 +2505,7 @@ __metadata:
     "@langchain/ollama": ^0.2.0
     "@types/johnny-five": 2.1.10
     "@types/node-pixel": ^0.11.2
+    "@types/play-sound": ^1.1.2
     johnny-five: "https://github.com/xiduzo/johnny-five.git"
     langchain: ^0.3.19
     node-pixel: ^0.11.0
@@ -6066,6 +6067,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/play-sound@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "@types/play-sound@npm:1.1.2"
+  dependencies:
+    "@types/node": "*"
+  checksum: 0e0c532f196b947876685b0b992d29e58efcb41173d9aac1d833d96f7172a9649ec67c5ccee4d31285362bc0cb10edd0891993bafce84ec85a5ead8ef1a97282
+  languageName: node
+  linkType: hard
+
 "@types/postcss-url@npm:10.0.4":
   version: 10.0.4
   resolution: "@types/postcss-url@npm:10.0.4"