fix: 录音选择格式

027xiguapi · Nov 30, 2023 · 9cc9ab9 · 9cc9ab9
1 parent 52ab341
commit 9cc9ab9
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 5 deletions.
diff --git a/packages/server/src/api/local.ts b/packages/server/src/api/local.ts
@@ -1,6 +1,6 @@
 import fs from 'node:fs';
 import multer from 'multer';
-import { join } from 'node:path';
+import { join, dirname } from 'node:path';
 import { Application } from 'express';
 import { exec } from 'child_process';
 import { getImgsByImgUrl, getAudiosByAudioUrl, getVideosByVideoUrl } from '../util/index';
@@ -142,4 +142,11 @@ export function initLocalApi(app: Application) {
     exec(`start "" "${folderPath}"`);
     res.json({ code: 0 });
   });
+
+  app.get('/openFilePath', async (req, res) => {
+    const filePath = req.query.filePath as string;
+    const folderPath = dirname(filePath);
+    exec(`start "" "${folderPath}"`);
+    res.json({ code: 0 });
+  });
 }
diff --git a/packages/web/CHANGELOG.md b/packages/web/CHANGELOG.md
@@ -1,5 +1,9 @@
 # @pear-rec/web
 
+## 1.2.14
+
+fix: 录音选择格式
+
 ## 1.2.13
 
 fix: electron 录屏 bug

diff --git a/packages/web/src/api/index.ts b/packages/web/src/api/index.ts
@@ -15,6 +15,12 @@ export function useApi() {
         method: 'get',
       });
     },
+    openFilePath: (filePath) => {
+      return request({
+        url: `/openFilePath?filePath=${filePath}`,
+        method: 'get',
+      });
+    },
     getFile: (url) => {
       return request({
         url: `/getFile?url=${url}`,

diff --git a/packages/web/src/components/recorderAudio/AudioRecorder.tsx b/packages/web/src/components/recorderAudio/AudioRecorder.tsx
@@ -13,10 +13,12 @@ const AudioRecorder = (props) => {
   const timer = useTimer();
   const micRef = useRef();
   const audioInputOptions = useRef<any>();
+  const mimeTypesOptions = useRef<any>();
   const [record, setRecord] = useState<any>(null);
   const [isOpenMic, setIsOpenMic] = useState(false);
   const [recordStatus, setRecordStatus] = useState('');
   const [deviceId, setDeviceId] = useState('');
+  const [mimeType, setMimeType] = useState('audio/webm');
 
   useEffect(() => {
     if (!micRef.current) return;
@@ -26,7 +28,7 @@ const AudioRecorder = (props) => {
       progressColor: 'rgb(100, 0, 100)',
     });
 
-    const record = wavesurfer.registerPlugin(RecordPlugin.create() as any);
+    const record = wavesurfer.registerPlugin(RecordPlugin.create({ mimeType }) as any);
 
     record.getEnumerateDevices().then((deviceInfos) => {
       let _audioInputOptions = [
@@ -47,6 +49,17 @@ const AudioRecorder = (props) => {
       audioInputOptions.current = _audioInputOptions;
     });
 
+    const mimeTypes = record.getSupportedMimeTypes();
+    let _mimeTypesOptions = [];
+    for (let i = 0; i < mimeTypes.length; i++) {
+      const mimeType = mimeTypes[i];
+      _mimeTypesOptions.push({
+        value: mimeType,
+        label: mimeType,
+      });
+    }
+    mimeTypesOptions.current = _mimeTypesOptions;
+
     record.on('record-start', () => {
       console.log('record-start');
       timer.start();
@@ -138,6 +151,10 @@ const AudioRecorder = (props) => {
     isOpenMic && record.startMic(value);
   }
 
+  function handleChangeMimeType(value) {
+    setMimeType(value);
+  }
+
   return (
     <Card title="设置">
       <Space>
@@ -150,6 +167,13 @@ const AudioRecorder = (props) => {
           onChange={handleChangeSource}
           options={audioInputOptions.current}
         />
+        格式
+        <Select
+          defaultValue="audio/webm"
+          style={{ width: 120 }}
+          onChange={handleChangeMimeType}
+          options={mimeTypesOptions.current}
+        />
         计时
         <Timer
           seconds={timer.seconds}

diff --git a/packages/web/src/components/recorderAudio/plugins/record.ts b/packages/web/src/components/recorderAudio/plugins/record.ts
@@ -122,7 +122,9 @@ class RecordPlugin extends BasePlugin<RecordPluginEvents, RecordPluginOptions> {
     };
 
     mediaRecorder.onstop = () => {
-      const blob = new Blob(recordedChunks, { type: mediaRecorder.mimeType });
+      const blob = new Blob(recordedChunks, {
+        type: this.options.mimeType || mediaRecorder.mimeType,
+      });
 
       this.emit('record-end', blob);
 
@@ -154,8 +156,9 @@ class RecordPlugin extends BasePlugin<RecordPluginEvents, RecordPluginOptions> {
   }
 
   /** Stop the recording */
-  public stopRecording() {
+  public stopRecording(mimeType?: string) {
     if (this.isRecording()) {
+      this.options.mimeType = mimeType;
       this.mediaRecorder?.stop();
     }
   }
@@ -209,9 +212,44 @@ class RecordPlugin extends BasePlugin<RecordPluginEvents, RecordPluginOptions> {
     });
   }
 
+  /** Get the devices */
   public getEnumerateDevices(): Promise<MediaDeviceInfo[]> {
     return navigator.mediaDevices.enumerateDevices();
   }
+
+  /** Get the supported mimeTypes */
+  public getSupportedMimeTypes(): string[] {
+    const media = 'audio';
+    const types = [
+      'wav',
+      'webm',
+      'mp4',
+      'ogg',
+      'mov',
+      'avi',
+      'wmv',
+      'flv',
+      'mkv',
+      'ts',
+      'x-matroska',
+      'mpeg',
+    ];
+    const codecs = ['vp9', 'vp9.0', 'vp8', 'vp8.0', 'avc1', 'av1', 'h265', 'h264'];
+    const supportedMimeTypes: string[] = [];
+    const isSupported = MediaRecorder.isTypeSupported;
+    types.forEach((type: string) => {
+      const mimeType = `${media}/${type}`;
+      codecs.forEach((codec: string) =>
+        [`${mimeType};codecs=${codec}`, `${mimeType};codecs=${codec.toUpperCase()}`].forEach(
+          (variation) => {
+            if (isSupported(variation)) supportedMimeTypes.push(variation);
+          },
+        ),
+      );
+      if (isSupported(mimeType)) supportedMimeTypes.push(mimeType);
+    });
+    return supportedMimeTypes;
+  }
 }
 
 export default RecordPlugin;
diff --git a/packages/web/src/components/records/RecordsContent.tsx b/packages/web/src/components/records/RecordsContent.tsx
@@ -6,11 +6,13 @@ import {
   CameraOutlined,
   VideoCameraOutlined,
 } from '@ant-design/icons';
+import { useApi } from '../../api';
 import { useRecordApi } from '../../api/record';
 import { eventEmitter } from '../../util/bus';
 
 const { Content } = Layout;
 const recordApi = useRecordApi();
+const api = useApi();
 
 const RecordAudioCard = forwardRef(() => {
   const [initLoading, setInitLoading] = useState(true);
@@ -158,6 +160,10 @@ const RecordAudioCard = forwardRef(() => {
     }
   }
 
+  function openFilePath(filePath) {
+    api.openFilePath(filePath);
+  }
+
   const loadMore =
     !initLoading && !loading && isMore ? (
       <div
@@ -197,7 +203,14 @@ const RecordAudioCard = forwardRef(() => {
                     dangerouslySetInnerHTML={{ __html: record.filePath }}
                   ></a>
                 }
-                description={<span dangerouslySetInnerHTML={{ __html: record.createdAt }}></span>}
+                description={
+                  <span>
+                    <span dangerouslySetInnerHTML={{ __html: record.createdAt }}></span>{' '}
+                    <span className="openFolder" onClick={() => openFilePath(record.filePath)}>
+                      在文件夹中显示
+                    </span>
+                  </span>
+                }
               />
             </Skeleton>
           </List.Item>

diff --git a/packages/web/src/pages/records/index.module.scss b/packages/web/src/pages/records/index.module.scss
@@ -23,6 +23,10 @@
       .keyword-lighten {
         background-color: gold;
       }
+      .openFolder {
+        color: #1677ff;
+        cursor: pointer;
+      }
     }
   }
 }