Audio zu Text mit KI: Eine umfassende Anleitung (2025)

In der heutigen schnelllebigen Welt ist die Fähigkeit, Audio in Text zu transkribieren, von unschätzbarem Wert. Ob es sich um die Umwandlung von Meetings, Interviews oder Podcasts handelt, eine genaue und effiziente Transkription kann die Produktivität und Zugänglichkeit erheblich steigern. Dieser Artikel zeigt Ihnen, wie Sie eine KI-gestützte Audiotranskriptionsanwendung mithilfe moderner Technologien wie Next.js 15, TypeScript, Tailwind CSS und der Groq AI API erstellen. Wir werden jeden Schritt im Detail durchgehen, um sicherzustellen, dass Sie ein voll funktionsfähiges Tool erstellen können, das Audio mit professioneller Genauigkeit in Text umwandelt.

Die Bedeutung der Audiotranskription

Die Audiotranskription ist der Prozess der Umwandlung von Audiosprachin Text. Dieser Prozess hat zahlreiche Anwendungen in verschiedenen Bereichen, darunter:

• Journalismus: Transkribieren von Interviews und Pressekonferenzen.
• Recht: Dokumentieren von Gerichtsverhandlungen und Aussagen.
• Bildung: Erstellen von Untertiteln für Vorlesungen und Webinare.
• Inhaltsgestaltung: Umwandeln von Podcasts und Videoskripten in Blog-Posts und Artikel.
• Barrierefreiheit: Bereitstellung von Textalternativen für hörgeschädigte Personen.

Früher war die manuelle Transkription zeitaufwändig und fehleranfällig. Mit dem Aufkommen der künstlichen Intelligenz (KI) können Audiotranskriptionsprozesse jetzt automatisiert werden, was sie schneller, genauer und zugänglicher macht.

Verwendete Technologien: Next.js 15, TypeScript, Tailwind CSS und Groq AI

Für diese Audiotranskriptionsanwendung verwenden wir die folgenden hochmodernen Technologien:

• Next.js 15: Ein React-Framework für serverseitiges Rendering und die Erstellung von performanten Webanwendungen. Es sorgt für ein schnelles Laden der Seite und ein optimales Benutzererlebnis.
• TypeScript: Eine typisierte Obermenge von JavaScript, die die Codeverwaltung verbessert und Fehler während der Entwicklung reduziert. Es bietet Typsicherheit und erweiterte Funktionen für große Projekte.
• Tailwind CSS: Ein Utility-First-CSS-Framework, mit dem Sie reaktionsschnelle und anpassbare Benutzeroberflächen schnell entwerfen können. Es bietet eine Vielzahl von vorgefertigten Klassen für Styling und Layout.
• Groq AI API: Eine leistungsstarke KI-Inferenzplattform, die die Whisper AI-Technologie für eine genaue und schnelle Audiotranskription nutzt. Es ermöglicht die Umwandlung von Audio in Text mit professioneller Genauigkeit.

  Mithilfe von Whisper AI und der Groq API lässt sich Sprache in Text umwandeln.

Upload- und Audiovisualisierung

Die Oberfläche ist benutzerfreundlich gestaltet und bietet eine nahtlose Benutzererfahrung. Nach dem Hochladen einer Audiodatei

können Sie sie mit einer coolen Audio-Visualisierung anhören. Der Visualisierer bietet ein Echtzeit-Feedback der Audiofrequenz und -intensität und steigert so die Benutzerfreundlichkeit. Die Anwendung unterstützt verschiedene Audioformate, darunter MP3, WAV und M4A, und bietet somit Flexibilität beim Hochladen von Audiodateien. Um das Audio zu transkribieren, klicken Sie einfach auf die Schaltfläche "Transkribieren", um den Prozess zu starten. Nach Abschluss wird das Audio mit professioneller Genauigkeit in Text umgewandelt.

Echtzeit-Audioaufnahme und -transkription

Zusätzlich zum Hochladen vorhandener Audiodateien bietet die Anwendung eine Funktion zur Aufnahme von Audio in Echtzeit.

Mit dieser Funktion können Sie mit Ihrem Mikrofon Audio direkt in der Anwendung aufnehmen und es sofort transkribieren lassen. Während der Aufnahme wird der transkribierte Text fast sofort angezeigt und bietet so eine Echtzeit-Transkriptionserfahrung. Diese Funktion ist besonders nützlich für die Erstellung von Notizen, Protokollen oder Untertiteln während Live-Veranstaltungen.

Kopierfunktion und reaktionsschnelles Design

Um den Benutzern die Arbeit mit der erstellten Transkription zu erleichtern, enthält die Benutzeroberfläche eine integrierte Kopierfunktion.

Mit dieser Funktion können Benutzer den Text sofort kopieren und in andere Anwendungen oder Dokumente einfügen. Um eine optisch ansprechende Benutzeroberfläche zu gewährleisten, ist die Anwendung mit Tailwind CSS responsiv gestaltet. Dies bedeutet, dass sich die Benutzeroberfläche nahtlos an verschiedene Bildschirmgrößen und Geräte anpasst und den Benutzern auf Desktops, Tablets und Smartphones ein optimales Erlebnis bietet.

Schritt 1: Richten Sie Ihr Next.js-Projekt ein

Beginnen Sie mit der Erstellung eines neuen Next.js-Projekts. Wenn Sie neu bei Next.js sind, befolgen Sie diese Schritte:

1. Öffnen Sie Ihr Terminal oder Ihre Kommandozeile.
2. Navigieren Sie zu dem Verzeichnis, in dem Sie Ihr Projekt speichern möchten.

3. Führen Sie den folgenden Befehl aus:

   npx create-next-app@latest transkribetext

   Dadurch wird ein neues Next.js-Projekt mit dem Namen 'transkribetext' eingerichtet. Sie können den Projektnamen nach Bedarf ändern.

   

   Achten Sie darauf, dass Next.js 15, TypeScript und Tailwind CSS ausgewählt sind.

Schritt 2: Groq SDK und Lucid React installieren

Installieren Sie als Nächstes die erforderlichen Pakete für Groq AI und Lucid React:

1. Navigieren Sie im Terminal zum Projektverzeichnis.

2. Führen Sie den folgenden Befehl aus, um das Groq SDK zu installieren:

   npm install --save groq-sdk

3. Installieren Sie als Nächstes das Lucid React-Paket mit dem folgenden Befehl:

   npm i lucid-react

   Diese Pakete sind unerlässlich für die Integration der KI-gestützten Transkription und die ansprechenden visuellen Elemente in Ihre Anwendung.

   

Schritt 3: Konfigurieren der Groq AI API

Um die Groq AI API zu nutzen, müssen Sie Ihre API-Anmeldedaten konfigurieren:

1. Besuchen Sie die offizielle Groq-Website und erstellen Sie ein Konto.
2. Navigieren Sie zum Bereich "API Keys" und erstellen Sie einen neuen API-Schlüssel.

   Bewahren Sie den Schlüssel sicher auf.

3. Erstellen Sie im Stammverzeichnis Ihres Projekts eine Datei mit dem Namen .env.local.

4. Fügen Sie den folgenden Eintrag zu der Datei hinzu und ersetzen Sie your-api-key-here durch Ihren tatsächlichen API-Schlüssel:

   GROQ_API_KEY=your-api-key-here

   Diese Datei wird verwendet, um Ihren API-Schlüssel sicher zu speichern, ohne ihn Ihrem Code preiszugeben.

Schritt 4: Erstellen des API-Routen-Handlers

Erstellen Sie einen API-Routen-Handler, um Anfragen zur Audiotranskription zu bearbeiten:

1. Erstellen Sie im Verzeichnis app einen neuen Ordner mit dem Namen api.
2. Erstellen Sie im Ordner api einen weiteren Ordner mit dem Namen transcribe.
3. Erstellen Sie im Ordner transcribe eine Datei mit dem Namen route.ts.

4. Fügen Sie die folgenden Codeausschnitte in die Datei route.ts ein. Der Code handhabt POST-Anfragen zur Audiotranskription mit der Groq AI API.

   import { NextRequest, NextResponse } from 'next/server';
   import Groq from 'groq-sdk';
   import { writeFile, unlink } from 'fs/promises';
   import path from 'path';
   import os from 'os';
   
   export async function POST(request: NextRequest) {
     let tempFilePath: string | null = null;
   
     try {
       const formData = await request.formData();
       const file = formData.get('file') as File;
   
       if (!file) {
         return NextResponse.json({ error: 'No file provided' }, { status: 400 });
       }
   
       // Convert file to buffer
       const buffer = Buffer.from(await file.arrayBuffer());
   
       // Create temporary file path
       const tempDir = os.tmpdir();
       const uniqueFilename = `upload-${Date.now()}-${Math.random().toString(36).substring(7)}${path.extname(file.name)}`;
       tempFilePath = path.join(tempDir, uniqueFilename);
   
       // Write the buffer to the temporary file
       await writeFile(tempFilePath, buffer);
   
       const groq = new Groq({
           apiKey: process.env.GROQ_API_KEY
       });
   
       const transcription = await groq.audio.transcriptions.create({
           file: require('fs').createReadStream(tempFilePath),
           model: "whisper-large-v3",
           response_format: "json",
           language: "en",
           temperature: 0.0,
       });
   
       // Clean up: Delete the temporary file
       if (tempFilePath) {
           await unlink(tempFilePath);
       }
       return NextResponse.json(transcription);
   
     } catch (error: any) {
         console.error("Transcription error:", error);
          // Ensure cleanup even if there's an error
       if (tempFilePath) {
           await unlink(tempFilePath);
       }
       return NextResponse.json({ error: 'Failed to transcribe audio' }, { status: 500 });
     }
   }

Schritt 5: Erstellen der AudioVisualizer-Komponente

Diese Komponente ist für die Erstellung der Audio-Visualisierung verantwortlich:

1. Erstellen Sie im Ordner components eine neue Datei mit dem Namen AudioVisualizer.tsx.

2. Fügen Sie die folgenden Codeausschnitte in die Datei AudioVisualizer.tsx ein:

   "use client";
   
   import React, { useRef, useEffect, useState } from 'react';
   
   interface AudioVisualizerProps {
       audioUrl?: string | null;
       mediaStream?: MediaStream | null;
       isLive?: boolean;
   }
   
   export default function AudioVisualizer({ audioUrl, mediaStream, isLive }: AudioVisualizerProps) {
       const [hasBrowser, setHasBrowser] = useState(false);
   
       const canvasRef = useRef<HTMLCanvasElement>(null);
       const audioRef = useRef<HTMLAudioElement>(null);
       const animationRef = useRef<number>(0);
       const analyserRef = useRef<AnalyserNode | null>(null);
       const sourceRef = useRef<MediaElementAudioSourceNode | MediaStreamAudioSourceNode | null>(null);
       const audioUrlRef = useRef<string | null>(null);
   
       useEffect(() => {
           if (!hasBrowser) return;
   
       const initializeAudioContext = async () => {
           const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
           return audioContext;
       }
   
       const initializeAudio = async () => {
       if (!hasBrowser) return;
   
           if (audioUrl !== audioUrlRef.current) {
            cleanup();
               audioUrlRef.current = audioUrl;
       }   
        const audioContext = await initializeAudioContext();
        const analyser = audioContext.createAnalyser();
       analyser.fftSize = 256;
   
       const canvas = canvasRef.current;
       const canvasCtx = canvas?.getContext("2d");
   
       let source: MediaElementAudioSourceNode | MediaStreamAudioSourceNode | null = null;
   
       if (isLive && mediaStream) {
         source = audioContext.createMediaStreamSource(mediaStream);
       } else if (audioUrl) {
           audioRef.current!.crossOrigin = "anonymous";
         source = audioContext.createMediaElementSource(audioRef.current!);
       }
   
       source?.connect(analyser);
       analyser.connect(audioContext.destination);
       analyserRef.current = analyser; 
       sourceRef.current = source;
   
       function drawVisualizer() {
            if (!analyserRef.current) return;
           animationRef.current = requestAnimationFrame(drawVisualizer);
   
           const bufferLength = analyserRef.current.frequencyBinCount;
           const dataArray = new Uint8Array(bufferLength);
           analyserRef.current.getByteFrequencyData(dataArray);
           if (!canvasCtx || !canvas) return;
           canvasCtx.fillStyle = "rgb(17, 24, 39)";
           canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
   
           const barWidth = (canvas.width / bufferLength) * 2.5;
           let barHeight;
           let x = 0;
   
           for (let i = 0; i < bufferLength; i++) {
               barHeight = dataArray[i];
               canvasCtx.fillStyle = 'rgb(' + (barHeight + 100) + ',50,50)';
               canvasCtx.fillRect(x, canvas.height - barHeight / 2, barWidth, barHeight/2);
   
               x += barWidth + 1;
           }
       }
   
       drawVisualizer();
   
           return () => {
               cleanup();
           }
        };
    useEffect(() => {
       setHasBrowser(typeof window !== "undefined");
   }, []);
    useEffect(() => {
       if (!hasBrowser) return;
        initializeAudio();
       }, [hasBrowser, audioUrl, mediaStream, isLive]);
   
       const cleanup = () => {
           cancelAnimationFrame(animationRef.current);
           if(sourceRef.current){
               sourceRef.current.disconnect();
           }
           analyserRef.current?.disconnect();
   
       }
   
       return (
   
   <canvas ref={canvasRef} className="bg-white/50 dark:bg-gray-800/50 backdrop-blur-xl rounded-2xl p-6 border border-gray-200 dark:border-gray-700"
                   width={500}
                   height={160}
               />
        );
   }
   

Wie funktioniert die Groq API Preisgestaltung?

Die genauen Preisdetails der Groq API sind wichtig, um die potenziellen Kosten zu verstehen, die mit der Nutzung ihrer Dienste verbunden sind. Dies gilt insbesondere für Anwendungen, die auf schnelle KI-Inferenz angewiesen sind. Die Groq-Preisgestaltung ist auf den hohen Leistungsanspruch der Plattform und den API-Zugang zu hochleistungsfähigen KI-Modellen zugeschnitten.

Die Website bietet Preisoptionen, aber die Preisgestaltung kann je nach Modell und Datendurchsatz unterschiedlich sein. Wenn Ihre Anwendung beispielsweise Unterstützung für mehrere Sprachen und höchste Genauigkeit benötigt, sollten Sie das Whisper Large V3 Turbo-Modell verwenden. Der Preis für dieses Modell ist variabel, sodass eine Kostenkontrolle durch eine sorgfältige Nutzung möglich ist. Andererseits eignet sich für Anwendungen, bei denen Fehlertoleranz im Vordergrund steht, die Distill Whisper Large V3-de-en mit nur englischer Unterstützung.

KI-gestützte Transkriptionsgenauigkeit

Die Groq AI API verwendet die Whisper AI-Technologie, um eine professionelle Genauigkeit bei der Umwandlung von Audio in Text zu gewährleisten. Dies ist besonders wichtig für Anwendungen, bei denen Präzision und Detailgenauigkeit von größter Bedeutung sind, z. B. bei juristischen oder medizinischen Transkriptionen.

Audio-Visualisierung

Die integrierte Audio-Visualisierung verbessert das Benutzererlebnis und bietet Echtzeit-Feedback zur Audiofrequenz und -intensität. Dies ist ein großer Vorteil für Aufgaben, die ein visuelles Verständnis der Audioinhalte erfordern.

Echtzeit-Aufnahme und -Transkription

Die Echtzeit-Aufnahmefunktion ermöglicht es Benutzern, Audio direkt in der Anwendung aufzunehmen und zu transkribieren, was sie zu einem idealen Tool für Live-Transkriptionen und Notizen macht.

Unterstützung für mehrere Audioformate

Die Anwendung unterstützt verschiedene Audioformate, darunter MP3, WAV und M4A. Dies sorgt für Flexibilität und Komfort beim Hochladen von Audiodateien.

Responsives Design

Die Anwendung ist mit Tailwind CSS responsiv gestaltet und stellt sicher, dass die Oberfläche für verschiedene Bildschirmgrößen und Geräte optimiert ist.

Einfache Bedienung

Kopieren Sie den Text einfach mit nur einem Klick. Das bedeutet, dass die Transkription sofort für die Verwendung in anderen Dokumenten oder Anwendungen verfügbar ist. Die App vereinfacht den workflow, sodass Sie sich mehr auf Ihre Inhalte und weniger auf die technischen Aspekte konzentrieren können.

Erstellung von Inhalten

Inhaltsvermarkter und Blogger können die Audiotranskription nutzen, um Podcasts und Videoskripte schnell in Blog-Posts und Artikel umzuwandeln, wodurch die Inhaltsstofflichkeit und das Suchmaschinenranking verbessert werden.

Bildung

Pädagogen können Transkriptionen verwenden, um Untertitel für Vorlesungen zu erstellen, Transkriptionen für Studenten bereitzustellen und ihre Lehrmaterialien für ein breiteres Publikum zugänglicher zu machen.

Rechts- und Medizinwesen

Rechts- und Medizinberufler können die Audiotranskription zur Dokumentation von Gerichtsverhandlungen, Zeugnissen und medizinischen Diktaten nutzen, um die Genauigkeit und Effizienz der Dokumentationsprozesse zu gewährleisten.

Barrierefreiheit

Die Audiotranskription hilft bei der Bereitstellung von Textalternativen für Audioinhalte und macht diese so für hörgeschädigte Personen zugänglich.

Meetings und Interviews

Nutzen Sie die App, um Meetings und Interviews zu transkribieren, wodurch das Erstellen von detaillierten Protokollen, die Aufgabenverteilung und der Zugriff auf wichtige Erkenntnisse aus dem Gesagten vereinfacht werden.