fix

src/components/form/VoiceRecorder.vue

@@ -121,6 +121,23 @@ let mediaStream = null
 let chunks = []
 let timerHandle = null
 let timerStart = 0
+let recorderType = null
+
+// The backend only accepts these audio extensions. Browsers can't record mp3/wav,
+// but most can record into an mp4 container (→ .m4a), so prefer a supported type
+// whose extension the backend allows; fall back to webm only as a last resort.
+const ACCEPTED_AUDIO_TYPES = [
+  { mime: 'audio/mp4', ext: 'm4a' },
+  { mime: 'audio/mpeg', ext: 'mp3' },
+  { mime: 'audio/wav', ext: 'wav' },
+]
+
+const pickRecorderType = () => {
+  const supported = ACCEPTED_AUDIO_TYPES.find((c) =>
+    window.MediaRecorder?.isTypeSupported?.(c.mime)
+  )
+  return supported || { mime: 'audio/webm', ext: 'webm' }
+}
 
 const formattedTime = computed(() => {
   const s = Math.floor(elapsedMs.value / 1000)
@@ -163,16 +180,19 @@ const startRecording = async () => {
   try {
     mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true })
     chunks = []
-    mediaRecorder = new window.MediaRecorder(mediaStream)
+    recorderType = pickRecorderType()
+    mediaRecorder = new window.MediaRecorder(mediaStream, { mimeType: recorderType.mime })
     mediaRecorder.ondataavailable = (e) => {
       if (e.data?.size > 0) chunks.push(e.data)
     }
     mediaRecorder.onstop = () => {
       isRecording.value = false
       stopTracks()
-      const blob = new Blob(chunks, { type: 'audio/webm' })
-      const file = new File([blob], `recording-${Date.now()}.webm`, {
-        type: 'audio/webm',
+      const mime = recorderType?.mime || mediaRecorder?.mimeType || 'audio/webm'
+      const ext = recorderType?.ext || 'webm'
+      const blob = new Blob(chunks, { type: mime })
+      const file = new File([blob], `recording-${Date.now()}.${ext}`, {
+        type: mime,
         lastModified: Date.now(),
       })
       setRecording(file)