ensure recording transcode to wav before saved

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<HTMLDivElement>();
+  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()

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 () => {

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,
   };
 };