From 7fe0f6bf7049316556e2af5392900c376810f9d8 Mon Sep 17 00:00:00 2001
From: nick <me@nickhoo.com>
Date: Sun, 23 Feb 2025 16:41:01 +0800
Subject: [PATCH 1/3] feat: add record audio

---
 scripts/build.sh                              |  0
 web/package.json                              |  5 +-
 .../ActionButton/RecordAudioButton.tsx        | 79 +++++++++++++++++++
 web/src/components/MemoEditor/index.tsx       |  2 +
 web/src/components/MemoResource.tsx           |  7 +-
 web/src/locales/en.json                       |  5 +-
 web/src/locales/zh-Hans.json                  |  3 +-
 7 files changed, 95 insertions(+), 6 deletions(-)
 mode change 100644 => 100755 scripts/build.sh
 create mode 100644 web/src/components/MemoEditor/ActionButton/RecordAudioButton.tsx

diff --git a/scripts/build.sh b/scripts/build.sh
old mode 100644
new mode 100755
diff --git a/web/package.json b/web/package.json
index 472e225a..6a369eed 100644
--- a/web/package.json
+++ b/web/package.json
@@ -81,5 +81,6 @@
     "protobufjs": "^7.4.0",
     "typescript": "^5.7.3",
     "vite": "^6.0.6"
-  }
-}
\ No newline at end of file
+  },
+  "packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0"
+}
diff --git a/web/src/components/MemoEditor/ActionButton/RecordAudioButton.tsx b/web/src/components/MemoEditor/ActionButton/RecordAudioButton.tsx
new file mode 100644
index 00000000..62d4e7ec
--- /dev/null
+++ b/web/src/components/MemoEditor/ActionButton/RecordAudioButton.tsx
@@ -0,0 +1,79 @@
+import { Button } from "@usememos/mui";
+import { MicIcon, StopCircleIcon } from "lucide-react";
+import { useCallback, useContext, useState } from "react";
+import toast from "react-hot-toast";
+import { useTranslate } from "@/utils/i18n";
+import { MemoEditorContext } from "../types";
+import { Resource } from "@/types/proto/api/v1/resource_service";
+import { useResourceStore } from "@/store/v1";
+
+const RecordAudioButton = () => {
+  const t = useTranslate();
+  const context = useContext(MemoEditorContext);
+  const resourceStore = useResourceStore();
+  const [isRecording, setIsRecording] = useState(false);
+  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);
+
+  const startRecording = useCallback(async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      const recorder = new MediaRecorder(stream);
+      const chunks: BlobPart[] = [];
+
+      recorder.ondataavailable = (e) => chunks.push(e.data);
+      recorder.onstop = async () => {
+        const blob = new Blob(chunks, { type: "audio/webm" });
+        const buffer = new Uint8Array(await blob.arrayBuffer());
+        
+        try {
+          const resource = await resourceStore.createResource({
+            resource: Resource.fromPartial({
+              filename: `recording-${new Date().getTime()}.webm`,
+              type: "audio/webm",
+              size: buffer.length,
+              content: buffer
+            }),
+          });
+          context.setResourceList([...context.resourceList, resource]);
+        } catch (error: any) {
+          console.error(error);
+          toast.error(error.details);
+        }
+
+        stream.getTracks().forEach(track => track.stop());
+      };
+
+      recorder.start();
+      setMediaRecorder(recorder);
+      setIsRecording(true);
+    } catch (error) {
+      console.error(error);
+      toast.error("无法访问麦克风");
+    }
+  }, [context, resourceStore]);
+
+  const stopRecording = useCallback(() => {
+    if (mediaRecorder) {
+      mediaRecorder.stop();
+      setMediaRecorder(null);
+      setIsRecording(false);
+    }
+  }, [mediaRecorder]);
+
+  return (
+    <Button 
+      className="relative" 
+      size="sm" 
+      variant="plain"
+      onClick={isRecording ? stopRecording : startRecording}
+    >
+      {isRecording ? (
+        <StopCircleIcon className="w-5 h-5 mx-auto text-red-500" />
+      ) : (
+        <MicIcon className="w-5 h-5 mx-auto" />
+      )}
+    </Button>
+  );
+};
+
+export default RecordAudioButton; 
\ No newline at end of file
diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
index 2e0bd384..067f2723 100644
--- a/web/src/components/MemoEditor/index.tsx
+++ b/web/src/components/MemoEditor/index.tsx
@@ -33,6 +33,7 @@ import RelationListView from "./RelationListView";
 import ResourceListView from "./ResourceListView";
 import { handleEditorKeydownWithMarkdownShortcuts, hyperlinkHighlightedText } from "./handlers";
 import { MemoEditorContext } from "./types";
+import RecordAudioButton from "./ActionButton/RecordAudioButton";
 
 export interface Props {
   className?: string;
@@ -466,6 +467,7 @@ const MemoEditor = observer((props: Props) => {
             <TagSelector editorRef={editorRef} />
             <MarkdownMenu editorRef={editorRef} />
             <UploadResourceButton />
+            <RecordAudioButton />
             <AddMemoRelationPopover editorRef={editorRef} />
             {workspaceMemoRelatedSetting.enableLocation && (
               <LocationSelector
diff --git a/web/src/components/MemoResource.tsx b/web/src/components/MemoResource.tsx
index 365d03d4..232a203f 100644
--- a/web/src/components/MemoResource.tsx
+++ b/web/src/components/MemoResource.tsx
@@ -18,7 +18,12 @@ const MemoResource: React.FC<Props> = (props: Props) => {
   return (
     <div className={`w-auto flex flex-row justify-start items-center text-gray-500 dark:text-gray-400 hover:opacity-80 ${className}`}>
       {resource.type.startsWith("audio") ? (
-        <audio src={resourceUrl} controls></audio>
+        <audio 
+          src={resourceUrl} 
+          controls
+          className="max-w-full"
+          controlsList="nodownload"
+        />
       ) : (
         <>
           <ResourceIcon className="!w-4 !h-4 mr-1" resource={resource} />
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index 1171f429..95ec2768 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -162,7 +162,8 @@
     "remove-completed-task-list-items-successfully": "The removal was successful",
     "failed-to-embed-memo": "Failed to embed memo",
     "description-is-required": "Description is required",
-    "fill-all-required-fields": "Please fill all required fields"
+    "fill-all-required-fields": "Please fill all required fields",
+    "microphone-not-available": "Cannot access microphone"
   },
   "reference": {
     "add-references": "Add references",
@@ -320,7 +321,7 @@
       },
       "disable-password-login": "Disable password login",
       "disable-password-login-final-warning": "Please type \"CONFIRM\" if you know what you are doing.",
-      "disable-password-login-warning": "This will disable password login for all users. It is not possible to log in without reverting this setting in the database if your configured identity providers fail. You’ll also have to be extra carefull when removing an identity provider",
+      "disable-password-login-warning": "This will disable password login for all users. It is not possible to log in without reverting this setting in the database if your configured identity providers fail. You'll also have to be extra carefull when removing an identity provider",
       "disable-public-memos": "Disable public memos",
       "disable-markdown-shortcuts-in-editor": "Disable Markdown shortcuts in editor",
       "display-with-updated-time": "Display with updated time",
diff --git a/web/src/locales/zh-Hans.json b/web/src/locales/zh-Hans.json
index 230f1e0f..34bcf29b 100644
--- a/web/src/locales/zh-Hans.json
+++ b/web/src/locales/zh-Hans.json
@@ -155,7 +155,8 @@
     "succeed-copy-link": "复制链接到剪贴板成功。",
     "update-succeed": "更新成功",
     "user-not-found": "未找到该用户",
-    "remove-completed-task-list-items-successfully": "移除成功！"
+    "remove-completed-task-list-items-successfully": "移除成功！",
+    "microphone-not-available": "无法访问麦克风"
   },
   "reference": {
     "add-references": "添加引用",

From b3e634b41fbf5ce558f5d3d429e83c7a1ccb6548 Mon Sep 17 00:00:00 2001
From: nick <me@nickhoo.com>
Date: Sun, 23 Feb 2025 16:56:40 +0800
Subject: [PATCH 2/3] feat: improve audio recording with cross-browser MIME
 type support

---
 .../ActionButton/RecordAudioButton.tsx        | 54 ++++++++++++++++---
 1 file changed, 47 insertions(+), 7 deletions(-)

diff --git a/web/src/components/MemoEditor/ActionButton/RecordAudioButton.tsx b/web/src/components/MemoEditor/ActionButton/RecordAudioButton.tsx
index 62d4e7ec..907b05e9 100644
--- a/web/src/components/MemoEditor/ActionButton/RecordAudioButton.tsx
+++ b/web/src/components/MemoEditor/ActionButton/RecordAudioButton.tsx
@@ -14,22 +14,61 @@ const RecordAudioButton = () => {
   const [isRecording, setIsRecording] = useState(false);
   const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);
 
+  // 检测浏览器支持的音频格式
+  const getSupportedMimeType = () => {
+    const types = [
+      'audio/webm',
+      'audio/mp4',
+      'audio/aac',
+      'audio/wav',
+      'audio/ogg'
+    ];
+    
+    for (const type of types) {
+      if (MediaRecorder.isTypeSupported(type)) {
+        return type;
+      }
+    }
+    return null;
+  };
+
   const startRecording = useCallback(async () => {
     try {
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      const recorder = new MediaRecorder(stream);
+      
+      const mimeType = getSupportedMimeType();
+      if (!mimeType) {
+        throw new Error("No supported audio format found");
+      }
+
+      const recorder = new MediaRecorder(stream, {
+        mimeType: mimeType
+      });
+      
       const chunks: BlobPart[] = [];
 
       recorder.ondataavailable = (e) => chunks.push(e.data);
       recorder.onstop = async () => {
-        const blob = new Blob(chunks, { type: "audio/webm" });
+        const blob = new Blob(chunks, { type: mimeType });
         const buffer = new Uint8Array(await blob.arrayBuffer());
         
+        // 根据不同的 mimeType 选择合适的文件扩展名
+        const getFileExtension = (mimeType: string) => {
+          switch (mimeType) {
+            case 'audio/webm': return 'webm';
+            case 'audio/mp4': return 'm4a';
+            case 'audio/aac': return 'aac';
+            case 'audio/wav': return 'wav';
+            case 'audio/ogg': return 'ogg';
+            default: return 'webm';
+          }
+        };
+
         try {
           const resource = await resourceStore.createResource({
             resource: Resource.fromPartial({
-              filename: `recording-${new Date().getTime()}.webm`,
-              type: "audio/webm",
+              filename: `recording-${new Date().getTime()}.${getFileExtension(mimeType)}`,
+              type: mimeType,
               size: buffer.length,
               content: buffer
             }),
@@ -43,14 +82,15 @@ const RecordAudioButton = () => {
         stream.getTracks().forEach(track => track.stop());
       };
 
-      recorder.start();
+      // 每秒记录一次数据
+      recorder.start(1000);
       setMediaRecorder(recorder);
       setIsRecording(true);
     } catch (error) {
       console.error(error);
-      toast.error("无法访问麦克风");
+      toast.error(t("message.microphone-not-available"));
     }
-  }, [context, resourceStore]);
+  }, [context, resourceStore, t]);
 
   const stopRecording = useCallback(() => {
     if (mediaRecorder) {

From 8878c5351f377fff025175ad743d8d7b87d0c6c9 Mon Sep 17 00:00:00 2001
From: nick <me@nickhoo.com>
Date: Sun, 23 Feb 2025 17:12:26 +0800
Subject: [PATCH 3/3] fix: eslint

---
 .../ActionButton/RecordAudioButton.tsx        | 59 ++++++++-----------
 web/src/components/MemoEditor/index.tsx       |  2 +-
 web/src/components/MemoResource.tsx           |  7 +--
 3 files changed, 27 insertions(+), 41 deletions(-)

diff --git a/web/src/components/MemoEditor/ActionButton/RecordAudioButton.tsx b/web/src/components/MemoEditor/ActionButton/RecordAudioButton.tsx
index 907b05e9..6e9b1bff 100644
--- a/web/src/components/MemoEditor/ActionButton/RecordAudioButton.tsx
+++ b/web/src/components/MemoEditor/ActionButton/RecordAudioButton.tsx
@@ -2,10 +2,10 @@ import { Button } from "@usememos/mui";
 import { MicIcon, StopCircleIcon } from "lucide-react";
 import { useCallback, useContext, useState } from "react";
 import toast from "react-hot-toast";
+import { useResourceStore } from "@/store/v1";
+import { Resource } from "@/types/proto/api/v1/resource_service";
 import { useTranslate } from "@/utils/i18n";
 import { MemoEditorContext } from "../types";
-import { Resource } from "@/types/proto/api/v1/resource_service";
-import { useResourceStore } from "@/store/v1";
 
 const RecordAudioButton = () => {
   const t = useTranslate();
@@ -16,14 +16,8 @@ const RecordAudioButton = () => {
 
   // 检测浏览器支持的音频格式
   const getSupportedMimeType = () => {
-    const types = [
-      'audio/webm',
-      'audio/mp4',
-      'audio/aac',
-      'audio/wav',
-      'audio/ogg'
-    ];
-    
+    const types = ["audio/webm", "audio/mp4", "audio/aac", "audio/wav", "audio/ogg"];
+
     for (const type of types) {
       if (MediaRecorder.isTypeSupported(type)) {
         return type;
@@ -35,32 +29,38 @@ const RecordAudioButton = () => {
   const startRecording = useCallback(async () => {
     try {
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      
+
       const mimeType = getSupportedMimeType();
       if (!mimeType) {
         throw new Error("No supported audio format found");
       }
 
       const recorder = new MediaRecorder(stream, {
-        mimeType: mimeType
+        mimeType: mimeType,
       });
-      
+
       const chunks: BlobPart[] = [];
 
       recorder.ondataavailable = (e) => chunks.push(e.data);
       recorder.onstop = async () => {
         const blob = new Blob(chunks, { type: mimeType });
         const buffer = new Uint8Array(await blob.arrayBuffer());
-        
+
         // 根据不同的 mimeType 选择合适的文件扩展名
         const getFileExtension = (mimeType: string) => {
           switch (mimeType) {
-            case 'audio/webm': return 'webm';
-            case 'audio/mp4': return 'm4a';
-            case 'audio/aac': return 'aac';
-            case 'audio/wav': return 'wav';
-            case 'audio/ogg': return 'ogg';
-            default: return 'webm';
+            case "audio/webm":
+              return "webm";
+            case "audio/mp4":
+              return "m4a";
+            case "audio/aac":
+              return "aac";
+            case "audio/wav":
+              return "wav";
+            case "audio/ogg":
+              return "ogg";
+            default:
+              return "webm";
           }
         };
 
@@ -70,7 +70,7 @@ const RecordAudioButton = () => {
               filename: `recording-${new Date().getTime()}.${getFileExtension(mimeType)}`,
               type: mimeType,
               size: buffer.length,
-              content: buffer
+              content: buffer,
             }),
           });
           context.setResourceList([...context.resourceList, resource]);
@@ -79,7 +79,7 @@ const RecordAudioButton = () => {
           toast.error(error.details);
         }
 
-        stream.getTracks().forEach(track => track.stop());
+        stream.getTracks().forEach((track) => track.stop());
       };
 
       // 每秒记录一次数据
@@ -101,19 +101,10 @@ const RecordAudioButton = () => {
   }, [mediaRecorder]);
 
   return (
-    <Button 
-      className="relative" 
-      size="sm" 
-      variant="plain"
-      onClick={isRecording ? stopRecording : startRecording}
-    >
-      {isRecording ? (
-        <StopCircleIcon className="w-5 h-5 mx-auto text-red-500" />
-      ) : (
-        <MicIcon className="w-5 h-5 mx-auto" />
-      )}
+    <Button className="relative" size="sm" variant="plain" onClick={isRecording ? stopRecording : startRecording}>
+      {isRecording ? <StopCircleIcon className="w-5 h-5 mx-auto text-red-500" /> : <MicIcon className="w-5 h-5 mx-auto" />}
     </Button>
   );
 };
 
-export default RecordAudioButton; 
\ No newline at end of file
+export default RecordAudioButton;
diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
index 067f2723..46b4695a 100644
--- a/web/src/components/MemoEditor/index.tsx
+++ b/web/src/components/MemoEditor/index.tsx
@@ -26,6 +26,7 @@ import VisibilityIcon from "../VisibilityIcon";
 import AddMemoRelationPopover from "./ActionButton/AddMemoRelationPopover";
 import LocationSelector from "./ActionButton/LocationSelector";
 import MarkdownMenu from "./ActionButton/MarkdownMenu";
+import RecordAudioButton from "./ActionButton/RecordAudioButton";
 import TagSelector from "./ActionButton/TagSelector";
 import UploadResourceButton from "./ActionButton/UploadResourceButton";
 import Editor, { EditorRefActions } from "./Editor";
@@ -33,7 +34,6 @@ import RelationListView from "./RelationListView";
 import ResourceListView from "./ResourceListView";
 import { handleEditorKeydownWithMarkdownShortcuts, hyperlinkHighlightedText } from "./handlers";
 import { MemoEditorContext } from "./types";
-import RecordAudioButton from "./ActionButton/RecordAudioButton";
 
 export interface Props {
   className?: string;
diff --git a/web/src/components/MemoResource.tsx b/web/src/components/MemoResource.tsx
index 232a203f..a2bd40ef 100644
--- a/web/src/components/MemoResource.tsx
+++ b/web/src/components/MemoResource.tsx
@@ -18,12 +18,7 @@ const MemoResource: React.FC<Props> = (props: Props) => {
   return (
     <div className={`w-auto flex flex-row justify-start items-center text-gray-500 dark:text-gray-400 hover:opacity-80 ${className}`}>
       {resource.type.startsWith("audio") ? (
-        <audio 
-          src={resourceUrl} 
-          controls
-          className="max-w-full"
-          controlsList="nodownload"
-        />
+        <audio src={resourceUrl} controls className="max-w-full" controlsList="nodownload" />
       ) : (
         <>
           <ResourceIcon className="!w-4 !h-4 mr-1" resource={resource} />