🐛 fix: Fix mine type in safari

lobehub · Nov 13, 2023 · 8181a8e · 8181a8e
1 parent 801b6ae
commit 8181a8e
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/src/const/mimeType.ts b/src/const/mimeType.ts
@@ -0,0 +1,11 @@
+export const RECORD_MIME_TYPE = () => {
+  return MediaRecorder.isTypeSupported('audio/webm')
+    ? {
+        extension: 'webm',
+        mineType: 'audio/webm',
+      }
+    : {
+        extension: 'mp4',
+        mineType: 'audio/mp4',
+      };
+};
diff --git a/src/services/fetchOpenaiSTT.ts b/src/services/fetchOpenaiSTT.ts
@@ -1,6 +1,7 @@
 import { v4 as uuidv4 } from 'uuid';
 
 import { OPENAI_API_KEY, OPENAI_STT_URL } from '@/const/api';
+import { RECORD_MIME_TYPE } from '@/const/mimeType';
 
 export interface OpenaiSttOptions {
   api?: {
@@ -22,8 +23,8 @@ export const fetchOpenaiSTT = async (
     Authorization: `Bearer ${key}`,
   });
 
-  const filename = `${uuidv4()}.webm`;
-  const file = new File([speech], filename, { type: 'audio/webm' });
+  const filename = `${uuidv4()}.${RECORD_MIME_TYPE().extension}`;
+  const file = new File([speech], filename, { type: RECORD_MIME_TYPE().mineType });
 
   const body = new FormData();
   body.append('file', file);

diff --git a/src/useAudioRecorder/index.ts b/src/useAudioRecorder/index.ts
@@ -1,5 +1,6 @@
 import { useCallback, useState } from 'react';
 
+import { RECORD_MIME_TYPE } from '@/const/mimeType';
 import { secondsToMinutesAndSeconds } from '@/utils/secondsToMinutesAndSeconds';
 
 export const useAudioRecorder = (onBolbAvailable?: (blob: Blob) => void) => {
@@ -37,7 +38,9 @@ export const useAudioRecorder = (onBolbAvailable?: (blob: Blob) => void) => {
       .getUserMedia({ audio: true })
       .then((stream) => {
         setIsRecording(true);
-        const recorder: MediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });
+        const recorder: MediaRecorder = new MediaRecorder(stream, {
+          mimeType: RECORD_MIME_TYPE().mineType,
+        });
         setMediaRecorder(recorder);
         recorder.start();
         _startTimer();