🐛 (audioClips) Fix empty metadata on recorded file

Closes #1753

apps/docs/editor/blocks/inputs/text.mdx

@@ -62,3 +62,7 @@ The generated URL will be stored in the defined variable.
 ## Allow audio clips
 
 This option, if enabled, displays a microphone button when the text input is empty. This allows users to record a voice message and send it to the bot.
+
+<Note>
+If supported, the recorded file will be a WebM file. If not, it will be an MP4 file (i.e. Safari).
+</Note>

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.3.11",
+  "version": "0.3.12",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",
@@ -15,6 +15,7 @@
   "dependencies": {
     "@ai-sdk/ui-utils": "0.0.36",
     "@ark-ui/solid": "3.3.0",
+    "@fix-webm-duration/fix": "1.0.1",
     "@stripe/stripe-js": "1.54.1",
     "@udecode/plate-common": "30.4.5",
     "dompurify": "3.0.6",

packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx

@@ -26,6 +26,7 @@ import { guessApiHost } from '@/utils/guessApiHost'
 import { VoiceRecorder } from './VoiceRecorder'
 import { Button } from '@/components/Button'
 import { MicrophoneIcon } from '@/components/icons/MicrophoneIcon'
+import { fixWebmDuration } from '@fix-webm-duration/fix'
 
 type Props = {
   block: TextInputBlock
@@ -163,20 +164,39 @@ export const TextInput = (props: Props) => {
   }
 
   const handleRecordingConfirmed = (stream: MediaStream) => {
-    mediaRecorder = new MediaRecorder(stream)
+    let startTime: number
+    const mimeType = MediaRecorder.isTypeSupported('audio/webm')
+      ? 'audio/webm'
+      : 'video/mp4'
+
+    mediaRecorder = new MediaRecorder(stream, { mimeType })
     mediaRecorder.ondataavailable = (event) => {
       if (event.data.size === 0) return
       recordedChunks.push(event.data)
     }
+    mediaRecorder.onstart = () => {
+      startTime = Date.now()
+    }
     mediaRecorder.onstop = async () => {
       if (recordingStatus() !== 'started' || recordedChunks.length === 0) return
+
+      const duration = Date.now() - startTime
+
+      const blob = await fixWebmDuration(
+        new Blob(recordedChunks, { type: mimeType }),
+        duration
+      )
+
       const audioFile = new File(
-        recordedChunks,
-        `rec-${props.block.id}-${Date.now()}.mp3`,
+        [blob],
+        `rec-${props.block.id}-${Date.now()}.${
+          mimeType === 'audio/webm' ? 'webm' : 'mp4'
+        }`,
         {
-          type: 'audio/mp3',
+          type: mimeType,
         }
       )
+
       setUploadProgress(undefined)
       const urls = (
         await uploadFiles({

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.3.11",
+  "version": "0.3.12",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.3.11",
+  "version": "0.3.12",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",