Apply suggestion made by Copilot

web/src/components/AudioPlayer.tsx

@@ -27,8 +27,8 @@ const AudioPlayer = ({ src, className = "" }: Props) => {
 
     const handleTimeUpdate = () => {
       setCurrentTime(audio.currentTime);
-      if (duration === 0 && audio.duration && !isNaN(audio.duration) && isFinite(audio.duration)) {
-        setDuration(audio.duration);
+      if (audio.duration && !isNaN(audio.duration) && isFinite(audio.duration)) {
+        setDuration((prev) => (prev === 0 ? audio.duration : prev));
       }
     };
 
@@ -59,16 +59,22 @@ const AudioPlayer = ({ src, className = "" }: Props) => {
     };
   }, []);
 
-  const togglePlayPause = () => {
+  const togglePlayPause = async () => {
     const audio = audioRef.current;
     if (!audio) return;
 
     if (isPlaying) {
       audio.pause();
+      setIsPlaying(false);
     } else {
-      audio.play();
+      try {
+        await audio.play();
+        setIsPlaying(true);
+      } catch (error) {
+        console.error("Failed to play audio:", error);
+        setIsPlaying(false);
+      }
     }
-    setIsPlaying(!isPlaying);
   };
 
   const handleSeek = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -112,7 +118,7 @@ const AudioPlayer = ({ src, className = "" }: Props) => {
           value={currentTime}
           onChange={handleSeek}
           disabled={isLoading || !duration}
-          className="flex-1 h-1 bg-muted hover:bg-background/50 hover:bg-background/50 rounded-lg appearance-none cursor-pointer disabled:opacity-50 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:border-0"
+          className="flex-1 h-1 bg-muted hover:bg-background/50 rounded-lg appearance-none cursor-pointer disabled:opacity-50 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:border-0"
         />
       </div>
     </div>

web/src/components/MemoEditor/ActionButton/InsertMenu.tsx

@@ -146,7 +146,7 @@ const InsertMenu = observer((props: Props) => {
         <div className="flex flex-row items-center gap-2 mr-2">
           <div className="flex flex-row items-center px-2 py-1 rounded-md bg-red-50 text-red-600 border border-red-200">
             <div className={`w-2 h-2 rounded-full bg-red-500 mr-2 ${!audioRecorder.isPaused ? "animate-pulse" : ""}`} />
-            <span className="font-mono text-sm">{new Date(audioRecorder.recordingTime * 1000).toISOString().substr(14, 5)}</span>
+            <span className="font-mono text-sm">{new Date(audioRecorder.recordingTime * 1000).toISOString().substring(14, 19)}</span>
           </div>
           <Button variant="outline" size="icon" onClick={audioRecorder.togglePause} className="shrink-0">
             {audioRecorder.isPaused ? <MicIcon className="w-4 h-4" /> : <span className="font-bold text-xs">||</span>}
@@ -180,7 +180,7 @@ const InsertMenu = observer((props: Props) => {
             </DropdownMenuItem>
             <DropdownMenuItem onClick={audioRecorder.startRecording}>
               <MicIcon className="w-4 h-4" />
-              Record Audio
+              {t("tooltip.record-audio")}
             </DropdownMenuItem>
             {/* View submenu with Focus Mode */}
             <DropdownMenuSub>

web/src/locales/en.json

@@ -477,6 +477,7 @@
     "select-location": "Location",
     "select-visibility": "Visibility",
     "tags": "Tags",
-    "upload-attachment": "Upload Attachment(s)"
+    "upload-attachment": "Upload Attachment(s)",
+    "record-audio": "Record Audio"
   }
-}
+}