components/audio/AudioRecorder.tsx
Die AudioRecorder
-Komponente in React ermöglicht es Benutzern, Audioaufnahmen direkt im Browser zu erstellen und eine Echtzeit-Audio-Visualisierung anzuzeigen. Diese Komponente verwendet die MediaRecorder
API und die LiveAudioVisualizer
-Bibliothek von react-audio-visualize
.
Der AudioRecorder handelt dabei alle Aspekte der Aufnahme.
- Permissions
- Recording
- Visualisierung
https://react-audio-visualize-demo.vercel.app/
Stellen Sie sicher, dass Sie die react-audio-visualize
-Bibliothek installiert haben:
npm install react-audio-visualize
Eigenschaft | Typ | Standardwert | Beschreibung |
---|---|---|---|
recording | boolean | - | Gibt an, ob die Aufnahme läuft. |
visualizer | boolean | true | Zeigt den Audio-Visualizer an, wenn true. |
width | number | 150 | Breite des Audio-Visualizers. |
height | number | 70 | Höhe des Audio-Visualizers. |
barWidth | number | 8 | Breite der Balken im Audio-Visualizer. |
barColor | string | "rgb(255, 255, 255)" | Farbe der Balken im Audio-Visualizer. |
smoothingTimeConstant | number | 0.4 | Glättungskonstante für den Audio-Visualizer. |
fftSize | number | 128 | FFT-Größe für den Audio-Visualizer. |
className | string | "" | CSS-Klasse für das umgebende div-Element. |
visualizerClassName | string | "" | CSS-Klasse für den Audio-Visualizer. |
maxDecibels | number | 100 | Maximale Dezibelwerte für den Audio-Visualizer. |
router | AppRouterInstance | - | Damit kann ein Next-Router weitergepasst werden |
onMicrophoneDenied | (error: any) => void | - | Falls der User den Mikrofonzugriff ablehnt. |
mirrored | boolean | false | zeigt einen Audiotrack, der die Bassspur in der Mitte hat. |
Der Component könnte wie folgt benutzt werden, um Live Audio zu visualisieren.
"use client";
import AudioRecorder from "@/components/audio/AudioRecorder";
import { useState } from "react";
function Page() {
const [isRecording, setIsRecording] = useState(false);
return (
<>
<AudioRecorder
recording={isRecording}
height={400}
width={400}
barWidth={7}
fftSize={1024}
maxDecibels={-20}
barColor="rgb(0,0,0)"
/>
<button onClick={() => setIsRecording(!isRecording)}>
{isRecording ? "Stop Recording" : "Start Recording"}
</button>
</>
);
}
export default Page;