Web Audio APIを使用した音声文字起こしで話者のフィードバックを防ぐ方法-jsチュートリアル-php.cn

Web Audio APIを使用した音声文字起こしで話者のフィードバックを防ぐ方法

WBOY

リリース： 2024-07-18 00:09:31

オリジナル

1172 人が閲覧しました

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

Assembly.ai トランスクリプションエンジンをフロントエンドのうるさいフロントエンドに接続するために、最近理解する必要があったことがもう 1 つありました。

私が試したことは次のとおりです:

エコーキャンセルを使用してマイクへのアクセスをリクエストします。
Web Audio API を使用してオーディオ処理チェーンをセットアップします。
このセットアップを音声認識と統合します。
追加のオーディオ処理には DynamicsCompressorNode を利用します。

ステップ 1: エコーキャンセルを使用してマイクアクセスを要求する

最初のステップは、エコーキャンセルを有効にしてマイクへのアクセスをリクエストすることです。この機能はほとんどの最新ブラウザに組み込まれており、スピーカーからのフィードバックを軽減するのに役立ちます。

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;
    }
}

ログイン後にコピー

説明

制約: エコーキャンセル、ノイズ抑制、自動ゲイン制御を有効にするオーディオ制約を指定します。
エラー処理: ユーザーがアクセスを拒否した場合、またはその他の問題がある場合、エラーを捕捉してログに記録します。

ステップ 2: Web オーディオ API ノードをセットアップする

次に、オーディオストリームを処理するために Web Audio API を設定します。これには、AudioContext の作成と、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 };
}

ログイン後にコピー

説明

AudioContext: オーディオ環境を表します。
MediaStreamSource: マイクストリームをオーディオコンテキストに接続します。
DynamicsCompressorNode: オーディオ信号のダイナミックレンジを低減し、バックグラウンドノイズとフィードバックの管理に役立ちます。

ステップ 3: 音声認識との統合

最後に、音声処理セットアップを Web Speech API と統合して、音声認識を実行します。

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();

ログイン後にコピー