feat: add audio extraction tool to convert video files to audio formats (AAC, MP3, WAV)

src/pages/tools/audio/extract-audio/index.tsx

@@ -0,0 +1,105 @@
+import {
+  Box,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  SelectChangeEvent
+} from '@mui/material';
+import React, { useState, useEffect, useRef } from 'react';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
+import { extractAudioFromVideo } from './service';
+import { InitialValuesType } from './types';
+import ToolVideoInput from '@components/input/ToolVideoInput';
+import { GetGroupsType } from '@components/options/ToolOptions';
+import ToolFileResult from '@components/result/ToolFileResult';
+import SelectWithDesc from '@components/options/SelectWithDesc';
+
+const initialValues: InitialValuesType = {
+  outputFormat: 'aac'
+};
+
+export default function ExtractAudio({
+  title,
+  longDescription
+}: ToolComponentProps) {
+  const [file, setFile] = useState<File | null>(null);
+  const [audioFile, setAudioFile] = useState<File | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  // Tool Options section for output format
+  const getGroups: GetGroupsType<InitialValuesType> = ({
+    values,
+    updateField
+  }) => {
+    return [
+      {
+        title: 'Output Format',
+        component: (
+          <Box>
+            <SelectWithDesc
+              selected={values.outputFormat}
+              onChange={(value) => {
+                updateField('outputFormat', value.toString());
+              }}
+              options={[
+                { label: 'AAC', value: 'aac' },
+                { label: 'MP3', value: 'mp3' },
+                { label: 'WAV', value: 'wav' }
+              ]}
+              description={
+                'Select the format for the audio to be extracted as.'
+              }
+            />
+          </Box>
+        )
+      }
+    ];
+  };
+
+  // Compute function for ToolContent (no-op, extraction is handled by effect)
+  const compute = async (values: InitialValuesType, input: File | null) => {
+    if (!input) return;
+    try {
+      setLoading(true);
+      const audioFileObj = await extractAudioFromVideo(input, values);
+      await setAudioFile(audioFileObj);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <ToolContent
+      title={title}
+      input={file}
+      inputComponent={
+        <ToolVideoInput value={file} onChange={setFile} title={'Input Video'} />
+      }
+      resultComponent={
+        loading ? (
+          <ToolFileResult
+            title={'Extracting Audio'}
+            value={null}
+            extension={''}
+            loading={true}
+          />
+        ) : (
+          <ToolFileResult
+            title={'Extracted Audio'}
+            value={audioFile}
+            extension={initialValues.outputFormat}
+          />
+        )
+      }
+      initialValues={initialValues}
+      getGroups={getGroups}
+      compute={compute}
+      toolInfo={{ title: `What is ${title}?`, description: longDescription }}
+      setInput={setFile}
+    />
+  );
+}