Svelte를 사용하여 응용 프로그램을 작성하는 음성 제어 메모

애플리케이션 소개

Web Speech API 및 Svelte를 사용하여 데모 애플리케이션 "Voice Notes"를 빌드했습니다. 이 응용 프로그램은 다음 기능을 지원합니다.
1) 음성과 키보드 입력을 이용한 필기
2) 생성된 노트 듣기
3) 생성된 노트 삭제

음성 API

Web Speech API를 사용하면 음성 데이터를 웹 앱에 통합할 수 있습니다. Web Speech API는 SpeechSynthesis(텍스트 음성 변환) 및 SpeechRecognition(음성 텍스트 변환)의 두 부분으로 구성됩니다.

참고 - Speech API는 Chrome 및 Firefox에서만 지원됩니다.

Youtube의 작업 데모

모바일 디자인

완전한 코드

https://github.com/karkranikhil/voice-notes

데모

https://voice-notes-nh00avakc.now.sh/

음성 API 상위 수준 개요.

1. API 지원 확인

try {
    let SpeechRecognition =
      window.SpeechRecognition || window.webkitSpeechRecognition;
    var recognition = new SpeechRecognition();
  } catch (e) {
    console.error(e);
  }

2. Speech to Text 이벤트 핸들러

let recordingText = `Press the Play button to Start recording.`; // use this in HTML
//recognition.continuous - If false, the recording will stop after a few seconds of silence.
// When true, the silence period is longer (about 15 seconds)
recognition.continuous = true;

// onresult called every time the Speech API captures Voice.
recognition.onresult = function(event) {
    let current = event.resultIndex;

// Get a transcript of what was said.
    let transcript = event.results[current][0].transcript;
    console.log(transcript);
  };

// Trigger on start
  recognition.onstart = function() {
 // setting the text to inform user about the action
    recordingText =
      "Voice recognition Started. Try speaking into the microphone.";
  };
// Trigger on end
  recognition.onspeechend = function() {
// setting the text to inform user about the action
    recordingText = "Voice recognition turned off.";
  };
// Trigger on error
  recognition.onerror = function(event) {
    if (event.error == "no-speech") {
// setting the text to inform user about the action
      recordingText = "No Voice was detected. Try again.";
    }
  };

3. Text to Speech 이벤트 핸들러

function readOutLoud(message) {
    let speech = new SpeechSynthesisUtterance();
    speech.text = message;
    speech.volume = 1;
    speech.rate = 1;
    speech.pitch = 1;
    window.speechSynthesis.speak(speech);
  }

참조

https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API