Merge pull request #9 from europanite/feature/develop

fix/mkv

Author: europanite

frontend/app/src/__tests__/HomeScreen.test.tsx

@@ -82,7 +82,7 @@ describe("HomeScreen", () => {
     ) as HTMLInputElement;
 
     expect(fileInput.accept).toBe(
-      "audio/*,video/mp4,video/webm,video/ogg,.mp4,.webm,.ogv,.m4v"
+      "audio/*,video/mp4,video/webm,video/ogg,video/x-matroska,video/matroska,.mp4,.webm,.ogv,.m4v,.mkv"
     );
   });
 

frontend/app/src/hooks/useTranscription.ts

@@ -139,15 +139,34 @@ export function useTranscription(): UseTranscriptionResult {
         const asr = await loadModel(selectedModelIdState);
         setStatus("transcribing");
 
-        // --- Decode MP3 -> mono Float32Array on the client ---
+        // --- Decode browser-supported audio/video -> mono Float32Array on the client ---
         // 1) Read file as ArrayBuffer
         const arrayBuffer = await file.arrayBuffer();
 
         // 2) Decode and (effectively) resample to 16 kHz
         const audioContext = new AudioContext({ sampleRate: 16000 });
-        const audioBuffer = await audioContext.decodeAudioData(
-          arrayBuffer.slice(0)
-        );
+        let audioBuffer: AudioBuffer;
+
+        try {
+          audioBuffer = await audioContext.decodeAudioData(
+            arrayBuffer.slice(0)
+          );
+        } catch (decodeError) {
+          const isMkv =
+            file.name.toLowerCase().endsWith(".mkv") ||
+            file.type === "video/x-matroska" ||
+            file.type === "video/matroska";
+
+          if (isMkv) {
+            throw new Error(
+              "This browser could not decode the selected MKV file. " +
+                "MKV selection is allowed, but transcription still depends on the browser's built-in media decoder. " +
+                "Please try Chrome/Edge, or convert/extract the audio to MP3, WAV, M4A, MP4, or WebM."
+            );
+          }
+
+          throw decodeError;
+        }
 
         // 3) Mix all channels down to mono instead of fixing to channel 0
         const channelData = mixToMono(audioBuffer);

frontend/app/src/screens/HomeScreen.tsx

@@ -74,7 +74,7 @@ const HomeScreen = () => {
         <h2 className="section-title">Step 1 - Choose a model and media file</h2>
         <p className="section-description">
           Pick a multilingual Whisper model, then select your audio or video file.
-          Whisper will automatically detect speech from supported media such as MP3 or MP4 in your browser.
+          Whisper will automatically detect speech from supported media such as MP3, MP4, WebM, or browser-decodable MKV in your browser.
         </p>
 
         <div className="field-group">
@@ -114,7 +114,7 @@ const HomeScreen = () => {
         <input
           ref={fileInputRef}
           type="file"
-          accept="audio/*,video/mp4,video/webm,video/ogg,.mp4,.webm,.ogv,.m4v"
+          accept="audio/*,video/mp4,video/webm,video/ogg,video/x-matroska,video/matroska,.mp4,.webm,.ogv,.m4v,.mkv"
           style={{ display: "none" }}
           onChange={handleFileChange}
         />