Heim > Web-Frontend > js-Tutorial > Hauptteil

So verhindern Sie Sprecher-Feedback bei der Sprachtranskription mithilfe der Web-Audio-API

WBOY
Freigeben: 2024-07-18 00:09:31
Original
1084 Leute haben es durchsucht

How to Prevent Speaker Feedback in Speech Transcription Using Web Audio API

Noch eine Sache, die ich kürzlich herausfinden musste, um meine Assembly.ai-Transkriptions-Engine an ein lautes Frontend anzuschließen.

Folgendes habe ich versucht:

  1. Anfordern von Mikrofonzugriff mit Echounterdrückung.
  2. Richten Sie mithilfe der Web-Audio-API eine Audioverarbeitungskette ein.
  3. Integrieren Sie dieses Setup mit der Spracherkennung.
  4. Nutzen Sie den DynamicsCompressorNode für zusätzliche Audioverarbeitung.

Schritt 1: Mikrofonzugriff mit Echounterdrückung anfordern

Der erste Schritt besteht darin, den Zugriff auf das Mikrofon mit aktivierter Echounterdrückung anzufordern. Diese Funktion ist in die meisten modernen Browser integriert und trägt dazu bei, das Feedback Ihrer Lautsprecher zu reduzieren.

async function getMicrophoneStream() {
    const constraints = {
        audio: {
            echoCancellation: true,
            noiseSuppression: true,
            autoGainControl: true
        }
    };

    try {
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        return stream;
    } catch (err) {
        console.error('Error accessing the microphone', err);
        return null;
    }
}
Nach dem Login kopieren

Erläuterung

  • Einschränkungen: Wir legen Audioeinschränkungen fest, um Echounterdrückung, Rauschunterdrückung und automatische Verstärkungsregelung zu ermöglichen.
  • Fehlerbehandlung: Wenn der Benutzer den Zugriff verweigert oder ein anderes Problem vorliegt, erkennen und protokollieren wir den Fehler.

Schritt 2: Web-Audio-API-Knoten einrichten

Als nächstes richten wir die Web-Audio-API ein, um den Audiostream zu verarbeiten. Dazu gehört das Erstellen eines AudioContext und das Verbinden verschiedener Knoten, einschließlich eines DynamicsCompressorNode.

async function setupAudioProcessing(stream) {
    const audioContext = new AudioContext();
    const source = audioContext.createMediaStreamSource(stream);

    // Create a DynamicsCompressorNode for additional processing
    const compressor = audioContext.createDynamicsCompressor();
    compressor.threshold.setValueAtTime(-50, audioContext.currentTime); // Example settings
    compressor.knee.setValueAtTime(40, audioContext.currentTime);
    compressor.ratio.setValueAtTime(12, audioContext.currentTime);
    compressor.attack.setValueAtTime(0, audioContext.currentTime);
    compressor.release.setValueAtTime(0.25, audioContext.currentTime);

    // Connect nodes
    source.connect(compressor);
    compressor.connect(audioContext.destination);

    return { audioContext, source, compressor };
}
Nach dem Login kopieren

Erläuterung

  • AudioContext: Stellt die Audioumgebung dar.
  • MediaStreamSource: Verbindet den Mikrofonstream mit dem Audiokontext.
  • DynamicsCompressorNode: Reduziert den Dynamikbereich des Audiosignals und hilft so, Hintergrundgeräusche und Rückkopplungen zu bewältigen.

Schritt 3: Integration mit Spracherkennung

Schließlich integrieren wir unser Audioverarbeitungs-Setup mit der Web Speech API, um eine Spracherkennung durchzuführen.

async function startSpeechRecognition() {
    const stream = await getMicrophoneStream();
    if (!stream) return;

    const { audioContext, source, compressor } = await setupAudioProcessing(stream);

    const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
    recognition.continuous = true;
    recognition.interimResults = true;

    recognition.onresult = (event) => {
        for (let i = event.resultIndex; i < event.results.length; i++) {
            const transcript = event.results[i][0].transcript;
            console.log('Transcript:', transcript);
        }
    };

    recognition.onerror = (event) => {
        console.error('Speech recognition error', event.error);
    };

    recognition.start();

    // Handle audio context resume if needed
    if (audioContext.state === 'suspended') {
        audioContext.resume();
    }

    return recognition;
}

// Start the speech recognition process
startSpeechRecognition();
Nach dem Login kopieren

Erläuterung

  • Einrichtung der Spracherkennung: Wir richten die Web Speech API für die kontinuierliche und vorübergehende Spracherkennung ein.
  • Ereignisbehandlung: Wir verarbeiten die Ereignisse onresult und onerror, um Erkennungsergebnisse und Fehler zu verarbeiten.
  • Erkennung starten: Wir starten den Spracherkennungsprozess und stellen sicher, dass der Audiokontext nicht unterbrochen wird.

Hoffentlich fanden Sie das nützlich.

Viel Spaß beim Codieren!

Tim.

Das obige ist der detaillierte Inhalt vonSo verhindern Sie Sprecher-Feedback bei der Sprachtranskription mithilfe der Web-Audio-API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!