JavaScript를 사용한 음성 인식

표지 이미지 크레딧: 드리블

얼마 전에 speech recognition API이 specs에 추가되었고 Chrome, Safari, Baidu, android webview, iOS safari, 삼성 인터넷 및 Kaios 브라우저(partial support)에서 see browser support in detail을 얻었습니다.



면책 조항: 이 구현은 Opera에서 작동하지 않으며(생성자를 지원하지 않기 때문에) FireFox에서도 작동하지 않습니다(단 하나도 지원하지 않기 때문에). , 시도해보고 싶다면 Chrome 또는 다른 호환 가능한 브라우저를 사용하는 것이 좋습니다.

음성 인식 코드 및 PoC

편집: 어떤 이유로든 임베드될 때 작동하지 않는다는 것을 깨달았습니다here's the link to open it directly.

내가 만든 구현은 현재 보여주기 위해 영어와 스페인어를 지원합니다.

빠른 지침 및 기능 개요:

드롭다운에서 언어 중 하나를 선택합니다.

마이크 아이콘을 누르면 녹음이 시작됩니다(이상한 애니메이션이 표시됨).

문장을 완성하면 상자에 적어줍니다.

녹음을 중지하려면 마이크를 다시 누르기만 하면 됩니다(애니메이션 중지).

상자를 눌러 클립보드의 텍스트를 복사할 수도 있습니다.

JavaScript를 사용한 브라우저의 음성 인식 - 키 코드 블록:

/* Check whether the SpeechRecognition or the webkitSpeechRecognition API is available on window and reference it */
const recognitionSvc = window.SpeechRecognition || window.webkitSpeechRecognition;

// Instantiate it
const recognition = new recognitionSvc();

/* Set the speech recognition to continuous so it keeps listening to whatever you say. This way you can record long texts, conversations and so on. */
recognition.continuous = true;


/* Sets the language for speech recognition. It uses IETF tags, ISO 639-1 like en-GB, en-US, es-ES and so on */
recognition.lang = 'en-GB';

// Start the speech recognition
recognition.start();

// Event triggered when it gets a match
recognition.onresult = (event) => { 
  // iterate through speech recognition results
  for (const result of event.results) {
    // Print the transcription to the console
    console.log(`${result[0].transcript}`);
  }
}

// Stop the speech recognition
recognition.stop();

이 구현은 현재 음성 인식을 위해 다음 언어를 지원합니다.

ko-KR

ko-KR

ES-ES

데데

드CH

fr-FR

더 많은 언어에 대한 지원을 추가하려면 댓글 섹션에서 알려주세요. 자신의 언어로 테스트할 수 있도록 빠르게 업데이트하겠습니다. 😁

오늘은 여기까지입니다. 즐거우셨기를 바랍니다.