convert audio wav to mp3 (#552)

web/app/components/base/voice-input/index.tsx

@@ -4,6 +4,7 @@ import { useParams, usePathname } from 'next/navigation'
 import cn from 'classnames'
 import Recorder from 'js-audio-recorder'
 import { useRafInterval } from 'ahooks'
+import { convertToMp3 } from './utils'
 import s from './index.module.css'
 import { StopCircle } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
 import { Loading02, XClose } from '@/app/components/base/icons/src/vender/line/general'
@@ -19,7 +20,12 @@ const VoiceInput = ({
   onConverted,
 }: VoiceInputTypes) => {
   const { t } = useTranslation()
-  const recorder = useRef(new Recorder())
+  const recorder = useRef(new Recorder({
+    sampleBits: 16,
+    sampleRate: 16000,
+    numChannels: 1,
+    compiling: false,
+  }))
   const canvasRef = useRef<HTMLCanvasElement | null>(null)
   const ctxRef = useRef<CanvasRenderingContext2D | null>(null)
   const drawRecordId = useRef<number | null>(null)
@@ -75,10 +81,10 @@ const VoiceInput = ({
     const canvas = canvasRef.current!
     const ctx = ctxRef.current!
     ctx.clearRect(0, 0, canvas.width, canvas.height)
-    const wavBlob = recorder.current.getWAVBlob()
-    const wavFile = new File([wavBlob], 'a.wav', { type: 'audio/wav' })
+    const mp3Blob = convertToMp3(recorder.current)
+    const mp3File = new File([mp3Blob], 'temp.mp3', { type: 'audio/mp3' })
     const formData = new FormData()
-    formData.append('file', wavFile)
+    formData.append('file', mp3File)
 
     let url = ''
     let isPublic = false

web/app/components/base/voice-input/utils.ts

@@ -0,0 +1,38 @@
+import lamejs from 'lamejs'
+
+export const convertToMp3 = (recorder: any) => {
+  const wav = lamejs.WavHeader.readHeader(recorder.getWAV())
+  const { channels, sampleRate } = wav
+  const mp3enc = new lamejs.Mp3Encoder(channels, sampleRate, 128)
+  const result = recorder.getChannelData()
+  const buffer = []
+
+  const leftData = result.left && new Int16Array(result.left.buffer, 0, result.left.byteLength / 2)
+  const rightData = result.right && new Int16Array(result.right.buffer, 0, result.right.byteLength / 2)
+  const remaining = leftData.length + (rightData ? rightData.length : 0)
+
+  const maxSamples = 1152
+  for (let i = 0; i < remaining; i += maxSamples) {
+    const left = leftData.subarray(i, i + maxSamples)
+    let right = null
+    let mp3buf = null
+
+    if (channels === 2) {
+      right = rightData.subarray(i, i + maxSamples)
+      mp3buf = mp3enc.encodeBuffer(left, right)
+    }
+    else {
+      mp3buf = mp3enc.encodeBuffer(left)
+    }
+
+    if (mp3buf.length > 0)
+      buffer.push(mp3buf)
+  }
+
+  const enc = mp3enc.flush()
+
+  if (enc.length > 0)
+    buffer.push(enc)
+
+  return new Blob(buffer, { type: 'audio/mp3' })
+}