fix: Fixed the issue of audio duration loss in recorded files

fix: Fixed the issue with low recording volume on Safari browser

Author: Amery2010

hooks/useAudio.ts

@@ -1,15 +1,10 @@
-import { useState, useEffect, useCallback } from 'react'
-
-async function getAudioObjectURL(src: string): Promise<string> {
-  const blob = await fetch(src).then((resp) => resp.blob())
-  return URL.createObjectURL(blob)
-}
+import { useState, useEffect, useCallback, useMemo } from 'react'
 
 function useAudio(url: string) {
-  const [audio] = useState<HTMLAudioElement>(new Audio())
   const [playing, setPlaying] = useState<boolean>(false)
   const [duration, setDuration] = useState<number>(0)
   const [current, setCurrent] = useState<number>(0)
+  const audio = useMemo(() => new Audio(url), [url])
 
   const toggle = useCallback(() => {
     if (!playing) {
@@ -19,41 +14,19 @@ function useAudio(url: string) {
   }, [audio, playing])
 
   const init = useCallback(async () => {
-    const audioObjectURL = await getAudioObjectURL(url)
-    audio.src = audioObjectURL
     audio.preload = 'auto'
-  }, [audio, url])
-
-  useEffect(() => {
-    playing ? audio.play() : audio.pause()
-  }, [audio, playing])
+  }, [audio])
 
   useEffect(() => {
     init()
-    let audioDuration = 0
     audio.addEventListener('ended', () => setPlaying(false))
     audio.addEventListener('loadeddata', () => {
-      if (audio.duration === Infinity) {
-        // HACK: Set a duration longer than the audio to get the actual duration of the audio
-        audio.currentTime = 1e1
-      } else {
-        setDuration(audio.duration)
-        audioDuration = audio.duration
-      }
+      setDuration(audio.duration)
     })
     audio.addEventListener('timeupdate', () => {
-      if (audioDuration === 0) {
-        audioDuration = audio.currentTime
-        setDuration(audioDuration)
-        setTimeout(() => {
-          audio.currentTime = 0
-          setCurrent(0)
-        }, 0)
-      }
       setCurrent(audio.currentTime)
     })
     return () => {
-      audioDuration = 0
       audio.removeEventListener('ended', () => setPlaying(false))
       audio.removeEventListener('loadeddata', () => setDuration(0))
       audio.removeEventListener('timeupdate', () => setCurrent(0))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "talk-with-gemini",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "private": true,
   "author": "Amery2010 <[email protected]>",
   "license": "GPL-3.0-only",
@@ -40,6 +40,7 @@
     "clipboard": "^2.0.11",
     "clsx": "^2.1.1",
     "crypto-js": "^4.2.0",
+    "fix-webm-duration": "^1.0.5",
     "highlight.js": "^11.9.0",
     "i18next": "^23.11.5",
     "i18next-browser-languagedetector": "^7.2.1",

pnpm-lock.yaml

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "talk-with-gemini",
-    "version": "0.12.1"
+    "version": "0.12.2"
   },
   "tauri": {
     "allowlist": {

src-tauri/tauri.conf.json

@@ -1,3 +1,4 @@
+import fixWebmDuration from 'fix-webm-duration'
 import { isFunction } from 'lodash-es'
 
 export interface AudioRecorderPayload {
@@ -16,10 +17,10 @@ export interface RecordMineType {
 }
 
 export class AudioRecorder {
-  public blob: Blob | null = null
   public time: number = 0
   public isRecording: boolean = false
   public autoStop: boolean = false
+  private startTime: number = 0
   protected audioContext: AudioContext
   protected mediaRecorder: MediaRecorder | null = null
   protected volumeThreshold: number = 30
@@ -82,7 +83,14 @@ export class AudioRecorder {
     } else {
       // 获取麦克风音频流
       navigator.mediaDevices
-        .getUserMedia({ audio: true })
+        .getUserMedia({
+          audio: {
+            sampleSize: 16,
+            channelCount: 1,
+            noiseSuppression: false,
+            echoCancellation: false,
+          },
+        })
         .then((stream) => {
           this.recording(stream)
         })
@@ -110,6 +118,15 @@ export class AudioRecorder {
     // 将麦克风连接到分析器
     microphone.connect(analyser)
 
+    const finishRecord = async () => {
+      const duration = Date.now() - this.startTime
+      const blob = new Blob(chunks, { type: mediaRecorderType.mineType })
+      const fixedBlob = await fixWebmDuration(blob, duration, { logger: false })
+      this.onFinish(fixedBlob)
+      this.startTime = 0
+      chunks = []
+    }
+
     // 监听录音数据可用事件，将数据发送到服务器
     mediaRecorder.addEventListener('dataavailable', (ev) => {
       if (ev.data.size > 0) {
@@ -118,21 +135,15 @@ export class AudioRecorder {
     })
     mediaRecorder.addEventListener('start', () => {
       this.isRecording = true
+      this.startTime = Date.now()
       this.startTimer()
       this.onStart()
     })
     mediaRecorder.addEventListener('pause', () => {
-      const blob = new Blob(chunks)
-      this.onFinish(blob)
-      this.blob = blob
-      chunks = []
+      finishRecord()
     })
     mediaRecorder.addEventListener('stop', () => {
-      const blob = new Blob(chunks)
-      this.onFinish(blob)
-      this.mediaRecorder = null
-      this.blob = blob
-      chunks = []
+      finishRecord()
       stream.getTracks().forEach((track) => track.stop())
     })