웹 오디오 API를 사용하여 음성 녹음에서 화자 피드백을 방지하는 방법-JS 튜토리얼-php.cn

웹 오디오 API를 사용하여 음성 녹음에서 화자 피드백을 방지하는 방법

WBOY

풀어 주다： 2024-07-18 00:09:31

원래의

1171명이 탐색했습니다.

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

Assembly.ai 전사 엔진을 시끄러운 프런트엔드에 연결하기 위해 최근 알아내야 할 또 다른 사항이 있습니다.

내가 시도한 것은 다음과 같습니다.

반향 제거 기능을 사용하여 마이크 액세스를 요청하세요.
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단계: 웹 오디오 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();

로그인 후 복사