4일차 텍스트 음성 변환은 두 번째 구성 요소 및 dohackathon에 대한 자세한 내용을 위해 수행됩니다.

해커톤 여정
안녕하세요 여러분😊👋
이번 디지털오션 해커톤 Day 4(참고로 day4는 12주 동안 작업하고 있는 이름) 기사에서 오늘까지 내가 어떻게 일을 했고 어떤 일을 끝냈는지에 대해 쓰려고 합니다. 지금 기사에.

이 시리즈를 팔로우하고 있다면 이 프로젝트의 두 번째 구성요소가 이미 거의 완료되었다는 것을 알고 있을 것입니다. 시리즈를 팔로우하지 않는다면 아래 어딘가에서 확인할 수 있는 시리즈를 찾을 수 있습니다.

어제 3일차 기사에서 드디어 2차의 다음 기능에 대한 이야기를 해서 오늘은 그 기능을 작업했습니다.

react-speech-kit을 사용하여 reactjs에서 텍스트 음성 변환 작업을 했습니다.

텍스트 음성 변환 기능을 추가하기 위해 Space.js 파일에서 다음과 같이 변경되었습니다.

const [ setValue] = useState('');
const { speak } = useSpeechSynthesis();

//첫 번째로 API 생성 텍스트에서 텍스트 음성 변환을 활성화하는 것은 나에게 어려운 작업으로 보이지만 몇 분 동안 생각하고 코드를 주의 깊게 살펴본 후 아래에서 수행한 작업을 보여 드리겠습니다.

  <p className={styles.space.explanation} value={photoData.explanation}
        onChange={(event) => setValue(event.target.explanation)}>{photoData.explanation}</p>
      </div>
    </div> 
    <div>
    <button className={styles.button} onClick={() => speak({ text: photoData.explanation })}>Listen 🔊</button>
    </div>

해당 버튼의 space.modules.css⤵️는 텍스트 음성 변환을 의미합니다.

.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #0719bb;
  border: black;
  margin-left:150px;
  margin-right:100px;
}
.button:hover {
  background-color: #101110;
}


.button {
  text-align: center;
  background-color: #384ab1;
}

버튼의 실시간 보기는 스크린샷일 뿐이며 관련 저장소는 곧 업데이트될 예정입니다.

자세한 코드는 이전 기사 코드베이스 섹션을 확인하십시오.

내 견해에 따르면 이 구성 요소는 완료되었지만 다음 버튼 대신(우주와 관련된 새로운 것을 탐색할 생각입니다) 다른 버튼NASA open API을 가져오고 우주 여행 웹 앱을 대화형으로 만들 생각입니다. 가능한 한 그 구성 요소는 세 번째 구성 요소가 될 것이고 네 번째 구성 요소는 프로젝트와 나에 대한 참조 및 짧은 정보와 특별 감사 섹션과 같은 우주 여행에 관한 것입니다.
그것이 이 기사의 전부입니다.
읽어주셔서 감사합니다 모두 좋은 하루 되세요😊

특별히 감사함
변경 사항을 제안하고 좋은 일을 하도록 영감을 준 onkar khedhkar와 shgoud goud.😊😊