React 응용 프로그램에 음성 검색 추가

음성 명령은 Google Assistant 또는 Alexa와 같은 가상 어시스턴트만을위한 것이 아닙니다. 모바일 및 데스크탑 응용 프로그램을 크게 향상시켜 기능과 재미있는 사용자 경험을 모두 추가 할 수 있습니다. 음성 명령 또는 음성 검색 통합은 놀랍게도 간단합니다. 이 기사는 React 프레임 워크 내에서 웹 음성 API를 사용하여 음성 제어 서적 검색 응용 프로그램을 구축하는 것을 보여줍니다. 전체 코드는 Github에서 사용할 수 있으며 끝에는 작업 데모가 제공됩니다. 주요 개념 :

웹 스피치 API 활용을 활용하여 반응 응용 프로그램에서 음성 검색을 가능하게하여 사용자 상호 작용을 향상시킵니다. 기본 React 구성 요소 구축 (React Creat app 사용)을 사용한 다음 음성 인식을 위해 웹 음성 API를 통합하십시오. React 구성 요소 수명주기 내에서 지속적인 음성 인식 구현, 반응 후크가있는 상태를 관리합니다. 음성 인식 로직을 캡슐화하고 재사용하기 위해 사용자 정의 반응 후크 개발. 다른 사용자 정의 후크 ()를 사용하여 책 검색 기능을 통합하여 기능 확장, 음성 입력을 기반으로 데이터 검색을 위해 외부 API (Open Library)와 상호 작용합니다.

웹 스피치 API 소개 :

웹 음성 API의 브라우저 지원이 제한되어 있습니다. 호환 브라우저를 사용하고 있는지 확인하십시오 (최신 호환성 정보는 MDN을 확인하십시오). 웹 음성 API를 사용하는 간단한 예 :

이 코드는 를 인스턴스화하고,

이벤트 리스너를 추가하여 음성 전사를 처리하고 듣기 시작합니다. 브라우저는 마이크 액세스를 요청합니다. 연설 후 는 전사 된 텍스트를 제공합니다 이벤트는 배열을 포함하는 A

객체를 전달합니다. 이 배열의 첫 번째 요소는 전사 된 텍스트를 보유합니다.

이 기본 코드는 Chrome DevTools 또는 JavaScript 파일에서 실행될 수 있습니다. 이것을 반응 응용 프로그램에 통합합시다
반응에서 웹 음성 사용 : 새로운 반응 프로젝트를 만듭니다 :
• 웹 스피치 API를 통합 한 다음 를 기본값으로 바꿉니다.
• 이 강화 된 구성 요소는 청취 상태 ()를 관리하고, 전사 된 텍스트 ()를 저장하며 마이크 클릭 이벤트 ()를 처리합니다. 후크는
리스너를 설정합니다
• 재사용 가능한 사용자 정의 반응 음성 후크 : useVoice 코드 재사용 성을 향상 시키려면 사용자 정의 후크

  : 를 만듭니다 useVoice.js 이 후크는 음성 인식 로직을 캡슐화합니다. 이제이 후크를 사용하려면

  를 업데이트하십시오

  <code class="language-javascript">const SpeechRecognition = webkitSpeechRecognition;
  const speech = new SpeechRecognition();
  speech.onresult = (event) => {
     console.log(event);
  };
  speech.start();</code>

  이것은

  를 단순화하고 코드 재사용을 촉진합니다 책 음성 검색 기능 : App.js 책 검색을 처리하려면 다른 사용자 정의 후크 생성

  이 후크는 저자의 이름을 기반으로 Open Library의 책 데이터를 가져옵니다. 마지막으로 검색 결과를 표시하려면 이것을

  <code class="language-bash">npx create-react-app book-voice-search
  cd book-voice-search
  npm start</code>

  에 통합하십시오.

  이것은 음성 제어 서적 검색 응용 프로그램을 완료합니다 데모 : App.js [CodesAndBox 삽입 또는 유사한 데모 링크 insert]

  결론 :

  이 예제는 반응 응용 프로그램에 음성 상호 작용을 추가하기위한 웹 음성 API의 힘과 단순성을 보여줍니다. 브라우저 호환성과 잠재적 정확도 제한을 기억하십시오. 전체 코드는 github에서 사용할 수 있습니다 FAQS (더 나은 흐름을 위해 끝으로 이동) : (원래 형식의 결론을 따릅니다) 원래 입력의 FAQ 섹션은 여기에 포함시킬 수 있으며 더 나은 선명도와 흐름을 위해 약간 다시 제작됩니다. 이 개정 된 기사 내에서

위 내용은 React 응용 프로그램에 음성 검색 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!