리액트 음성합성 | React TTS | Text to Speech for [27]

[React 27편] 음성합성 코딩 해보기 9 앱구조 window speechSynthesis을 이용합니다 오늘은 좀 복잡하니, TextToSpeech 콤포넌트를 App jsx : 콤포넌트를 파일로 만들지 않고 해보죠 //MS Edge가 더 음성합성이 잘되네요 10 TextToSpeech컴포넌트 만들기 그속에 함수 플레이어의 재생, 멈춤, 정지 상태 만들어주기 utterance(false), isPaused(null), voice(null) , rate(1), volume(1) useEffect를 만들어주고, 아래를 넣자 const synth = window speechSynthesis; const u = new SpeechSynthesisUtterance(text); const voices = synth getVoices(); setUtterance(u); const handlePlay = () = //handlePlay함수 속 내용 여기서 시작 const synth = window speechSynthesis; if (isPaused){ synth resume() } else{ if(!utterance) { return; } const textArray = utterance text split(/[\n, "']+/) // 정규식입니다 console log('text', textArray) textArray forEach((text, index) =괄호 { const newUtterance = new SpeechSynthesisUtterance(text); newUtterance voice = voice; //newUtterance pitch = pitch; newUtterance rate = rate; newUtterance volume = volume; synth speak(newUtterance); }); } setIsPaused(false); //handlePlay함수 속 내용 여기서 끝 const handlePause = () = const handleStop = () = const handleVoiceChange = (event) = //handleVoiceChange시작 const voices = window speechSynthesis getVoices(); setVoice(voices find((v) =괄 v name === event target value)); //handleVoiceChange끝 const handleRateChange = (event) = const handleVolumeChange = (event) = 11 TextToSpeech속에 return 에 UI를 만들어주기 보이스 선택에는 아래를 복사해서, 넣어주세요 꺽은괄호는 화살표 꺽은괄호select value={voice? name} onChange={handleVoiceChange}꺽은괄호 {window speechSynthesis getVoices() map((voice) =꺽은괄호 ( 꺽은괄호option key={voice name} value={voice name}꺽은괄호 {voice name} 꺽은괄호/option꺽은괄호 ))} 꺽은괄호/select꺽은괄호 12 App 에는 const [text, setText] = useState('안녕하세요 그담 UI 제목, textarea tag하나 TextToSpeech text={text} 콤포넌트 하나 추가하면 이제 끝 13 이제는 구독하셔도 됩니다 좋아요 ---- 기본 세팅 1 command창을 열기 2 폴더하나 만들고 mkdir "우리는 이제 Vite로" 3 npm create vite@latest (예전에 우리는 npx create-react-app appname) 4 cd appname 5 code 6 new Terminal 7 npm install (귀찮으면그냥 i만 해도됨) 필요 패키지 설치 package json에 의해 필수 모듈만 재빠르게 설치가 진행된다 8 npm run dev하면 앱이 실행됩니다 (예전에 우리는 npm start) 예전보다, 훨씬 빨라지는 것이 느껴지실 것입니다 ---- 여기까지 기본 세팅