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

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

1. 반향 제거 기능을 사용하여 마이크 액세스를 요청합니다.
2. Web Audio API를 사용하여 오디오 처리 체인을 설정합니다.
3. 이 설정을 음성 인식과 통합합니다.
4. 추가 오디오 처리를 위해 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  {
        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();

설명

• 음성 인식 설정: 지속적이고 임시적인 음성 인식을 위해 Web Speech API를 설정합니다.
• 이벤트 처리: 인식 결과 및 오류를 처리하기 위해 onresult 및 onerror 이벤트를 처리합니다.
• 인식 시작: 음성 인식 프로세스를 시작하고 오디오 컨텍스트가 중단되지 않았는지 확인합니다.

이 내용이 도움이 되셨기를 바랍니다.

즐거운 코딩하세요!

팀.