From 7a1ae1284c85f7590f1de54ec4404f022a2fc8ae Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Sat, 21 Mar 2026 11:09:25 +0100
Subject: [PATCH] feat(mukke): support all common audio formats for upload and
 playback

Expand accepted audio formats beyond MP3/WAV/OGG to include FLAC, AAC,
M4A, AIFF, OPUS, WMA, WebM, ALAC, APE, WavPack, DSF, and DFF.
The HTML5 Audio player already handles whatever the browser supports.

Changes:
- BeatUploader: accept audio/* instead of hardcoded format list
- shared-storage: add MIME type mappings for all common audio formats

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/lib/components/BeatUploader.svelte    | 14 +++++----
 packages/shared-storage/src/utils.ts          | 30 ++++++++++++++++++-
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/apps/mukke/apps/web/src/lib/components/BeatUploader.svelte b/apps/mukke/apps/web/src/lib/components/BeatUploader.svelte
index 5d81a3161..0c01d149f 100644
--- a/apps/mukke/apps/web/src/lib/components/BeatUploader.svelte
+++ b/apps/mukke/apps/web/src/lib/components/BeatUploader.svelte
@@ -24,8 +24,7 @@
 	let currentBeatId = $state<string | null>(null);
 	let fileInputRef: HTMLInputElement;
 
-	const acceptedTypes = ['audio/mpeg', 'audio/wav', 'audio/ogg', 'audio/mp3', 'audio/x-wav'];
-	const acceptedExtensions = '.mp3,.wav,.ogg';
+	const acceptedExtensions = 'audio/*';
 
 	async function startTranscription(beatId: string) {
 		isTranscribing = true;
@@ -56,8 +55,11 @@
 		if (!file) return;
 
 		// Validate file type
-		if (!acceptedTypes.includes(file.type) && !file.name.match(/\.(mp3|wav|ogg)$/i)) {
-			errorMessage = 'Please select an audio file (MP3, WAV, or OGG)';
+		if (
+			!file.type.startsWith('audio/') &&
+			!file.name.match(/\.(mp3|wav|ogg|flac|aac|m4a|wma|aiff|aif|opus|webm|alac|ape|wv|dsf|dff)$/i)
+		) {
+			errorMessage = 'Please select an audio file';
 			return;
 		}
 
@@ -241,7 +243,9 @@
 					<p class="text-foreground-secondary text-sm">
 						Drag & drop or click to select an audio file
 					</p>
-					<p class="text-foreground-secondary text-xs mt-2">Supported formats: MP3, WAV, OGG</p>
+					<p class="text-foreground-secondary text-xs mt-2">
+						Supported formats: MP3, WAV, OGG, FLAC, AAC, M4A, AIFF, OPUS, WebM and more
+					</p>
 				</label>
 			{/if}
 
diff --git a/packages/shared-storage/src/utils.ts b/packages/shared-storage/src/utils.ts
index 6a8612a4f..7b8564e33 100644
--- a/packages/shared-storage/src/utils.ts
+++ b/packages/shared-storage/src/utils.ts
@@ -75,6 +75,17 @@ export function getContentType(filename: string): string {
 		'.wav': 'audio/wav',
 		'.ogg': 'audio/ogg',
 		'.m4a': 'audio/mp4',
+		'.aac': 'audio/aac',
+		'.flac': 'audio/flac',
+		'.aiff': 'audio/aiff',
+		'.aif': 'audio/aiff',
+		'.opus': 'audio/opus',
+		'.wma': 'audio/x-ms-wma',
+		'.alac': 'audio/mp4',
+		'.ape': 'audio/x-ape',
+		'.wv': 'audio/x-wavpack',
+		'.dsf': 'audio/dsf',
+		'.dff': 'audio/dff',
 
 		// Video
 		'.mp4': 'video/mp4',
@@ -127,7 +138,24 @@ export const DOCUMENT_EXTENSIONS = ['.pdf', '.doc', '.docx', '.xls', '.xlsx', '.
 /**
  * Common allowed extensions for audio
  */
-export const AUDIO_EXTENSIONS = ['.mp3', '.wav', '.ogg', '.m4a'];
+export const AUDIO_EXTENSIONS = [
+	'.mp3',
+	'.wav',
+	'.ogg',
+	'.m4a',
+	'.aac',
+	'.flac',
+	'.aiff',
+	'.aif',
+	'.opus',
+	'.wma',
+	'.webm',
+	'.alac',
+	'.ape',
+	'.wv',
+	'.dsf',
+	'.dff',
+];
 
 /**
  * Common allowed extensions for video