브라우저에서 실시간 자막 기능을 구현했습니다

Whisper가 필요하지 않습니다. API 키도 필요 없습니다. 서버도 필요 없습니다.

Chrome과 Edge에는 내장된 speech-to-text 엔진이 포함되어 있습니다. 저는 이를 사용하여 단 30줄의 코드로 실시간 자막 기능을 구현했습니다.

여기서 확인해 보세요: https://dev48v.infy.uk/solve/day8-live-captions.html

이 코드는 SpeechRecognition API를 사용합니다.

단순한 받아쓰기 상자와 실제 실시간 자막의 차이를 만드는 것은 두 가지 설정입니다:

이 설정들이 없다면 엔진은 말을 멈춘 후에만 텍스트를 표시합니다. 이 설정들을 사용하면 실시간으로 추측된 단어들을 볼 수 있으며, 이를 통해 자막이 깜빡이는 듯한 효과를 낼 수 있습니다.

엔진은 침묵이 너무 오래 지속되면 멈춥니다. 이는 onend 이벤트에서 엔진을 다시 시작함으로써 해결할 수 있습니다. 이 루프를 통해 침묵이나 조용한 순간에도 자막이 계속 실행됩니다.

Chrome은 이 프로세스를 위해 오디오를 Google 서버로 스트리밍합니다. 즉, 인터넷 연결이 필요합니다.

마이크 외에도 활용할 수 있습니다. 화상 회의나 YouTube 탭의 오디오를 캡처할 수 있습니다. getDisplayMedia를 사용하여 오디오를 가져온 뒤 변환기에 전달하면 됩니다.

브라우저에는 아직 활용되지 않은 많은 기능이 있습니다. 실시간 자막과 음성 명령은 단 한 줄의 코드로 구현할 수 있습니다. 백엔드도 필요하지 않습니다.

출처: https://dev.to/dev48v/i-built-live-captions-in-the-browser-no-api-key-no-server-4i7n