diff --git a/enjoy/src/renderer/components/record-button.tsx b/enjoy/src/renderer/components/record-button.tsx index 3b4853f3..6430937a 100644 --- a/enjoy/src/renderer/components/record-button.tsx +++ b/enjoy/src/renderer/components/record-button.tsx @@ -7,6 +7,7 @@ import WaveSurfer from "wavesurfer.js"; import { cn } from "@renderer/lib/utils"; import { RadialProgress, toast } from "@renderer/components/ui"; import { useHotkeys } from "react-hotkeys-hook"; +import { useTranscribe } from "@renderer/hooks"; export const RecordButton = (props: { className?: string; @@ -117,6 +118,7 @@ const RecordButtonPopover = (props: { onRecordEnd: (blob: Blob, duration: number) => void; }) => { const containerRef = useRef(); + const { transcodeUsingWasm } = useTranscribe(); useEffect(() => { if (!containerRef.current) return; @@ -138,7 +140,8 @@ const RecordButtonPopover = (props: { record.on("record-end", async (blob: Blob) => { const duration = Date.now() - startAt; - props.onRecordEnd(blob, duration); + const output = await transcodeUsingWasm(blob); + props.onRecordEnd(output, duration); }); RecordPlugin.getAvailableAudioDevices() diff --git a/enjoy/src/renderer/context/app-settings-provider.tsx b/enjoy/src/renderer/context/app-settings-provider.tsx index c4bc2bc3..39d91193 100644 --- a/enjoy/src/renderer/context/app-settings-provider.tsx +++ b/enjoy/src/renderer/context/app-settings-provider.tsx @@ -81,9 +81,7 @@ export const AppSettingsProvider = ({ const prepareFfmpeg = async () => { const valid = await EnjoyApp.ffmpeg.check(); setFfmpegValid(valid); - if (!valid) { - loadFfmpegWASM(); - } + loadFfmpegWASM(); }; const loadFfmpegWASM = async () => { diff --git a/enjoy/src/renderer/hooks/use-transcribe.tsx b/enjoy/src/renderer/hooks/use-transcribe.tsx index 4b35884e..f3d062bf 100644 --- a/enjoy/src/renderer/hooks/use-transcribe.tsx +++ b/enjoy/src/renderer/hooks/use-transcribe.tsx @@ -27,8 +27,7 @@ export const useTranscribe = () => { const transcode = async (src: string, options?: string[]) => { if (ffmpegValid) { const output = `enjoy://library/cache/${src.split("/").pop()}.wav`; - const res = await EnjoyApp.ffmpeg.transcode(src, output, options); - console.log(res); + await EnjoyApp.ffmpeg.transcode(src, output, options); const data = await fetchFile(output); return new Blob([data], { type: "audio/wav" }); } else { @@ -36,15 +35,26 @@ export const useTranscribe = () => { } }; - const transcodeUsingWasm = async (src: string, options?: string[]) => { + const transcodeUsingWasm = async (src: string | Blob, options?: string[]) => { if (!ffmpegWasm?.loaded) return; options = options || ["-ar", "16000", "-ac", "1", "-c:a", "pcm_s16le"]; try { - const uri = new URL(src); + let uri: URL; + if (src instanceof Blob) { + uri = new URL(URL.createObjectURL(src)); + } else { + uri = new URL(src); + } + const input = uri.pathname.split("/").pop(); - const output = input.replace(/\.[^/.]+$/, ".wav"); + let output: string; + if (src instanceof Blob) { + output = input + ".wav"; + } else { + output = input.replace(/\.[^/.]+$/, ".wav"); + } await ffmpegWasm.writeFile(input, await fetchFile(src)); await ffmpegWasm.exec(["-i", input, ...options, output]); const data = await ffmpegWasm.readFile(output); @@ -274,6 +284,7 @@ export const useTranscribe = () => { return { transcode, + transcodeUsingWasm, transcribe, }; };