영어 단문 발음 연습 ver 2 - Text-To-Speech

 

 

이번 강좌는 지난번에 만들었던 영어 단문 발음 연습 앱에 TTS 기능을 추가해서 좀더 효과적인 학습앱 개발을 하는 것 입니다.

TTS는 글씨를 음성으로 변경해서 스피커를 통해서 들려주는 서비스로, 우리 주위에서 상당히 많이 사용되고 있는 기술 입니다. Windows에서는 기본적으로 한글 음성 서비스를 지원하고 있기 때문에 손쉽게 이런 기능을 구현 할 수 있습니다.

 

 

유튜브 채널 구독 신청 plz~

 

 

* 라즈베리파이3에 한국어 음성 파일 설치하기

 

 

 

완성 앱 데모

 

 

 

 

 

 

Part 1

 

* 환경 및 준비
* 참고 자료
* TTS, Text-To-Speech Service
* TTS, Text-To-Speech
* SSML Element
* TTS - Demo
* 영어 단문 발음 연습 앱 V2
* PC 환경 설정 확인
* 앱 개발 순서
* 음성 출력 방법
* 단문 발은 연습 페이지 구현 로직

 

 

 

Part 2

 

* 단문 초기화 기능 구현
* cvs 파일 프로젝트에 추가
* 단문 헬퍼 파일 추가, 구현
* CommonHelper 추가, 구현
* Singleton을 이용해서 싱글톤 인스턴스 만들어서 사용하기

 

 

 

Part 3

 

* 단문 연습 페이지 구현 - 시작 버튼 클릭 시 단문 하나 선택 하기 구현
* MainPage.xaml 화면 구현
* MainViewModel.cs 구현
- 커맨드 추가
- ShowText, Result 프로퍼티 추가 및 디자인 타임 데이터 연결
- 화면에 바인딩
- 화면에 MediaElement 컨트롤 추가
* Blend를 이용해서 커맨드와 MediaElement 연결
* MainPage.xaml 화면 추가 구현
* MainViewModel.cs 추가 구현
- Init() 구현
- NavigationServiceEx 인스턴스 가지고 와서 이벤트 연결
- NavigationService_Navigated 이벤트 핸들러 구현
- 시작 버튼 클릭 시 단문 하나 선택하기 구현

 

 

 

Part 4

 

* 단문 연습 페이지 구현 - 음성 출력 구현
* MainViewModel.cs 추가 구현
- SpeechSynthesizer 인스턴스 생성 및 초기화
- 음성 스트림 생성
- Voice 목록에서 한국어, 영어 두개의 voice 찾아서 사용
- 음성 스트림 출력
* MediaBehavior 추가 및 구현
* Blend를 이용해서 MediaBehavior를 MediaElement와 연결
* MediaElement에 바인딩 수정

 

 

 

Part 5

 

* 단문 연습 페이지 구현 - 음성 입력 받기와 결과 표시
* MainViewModel.cs 에 음성 입력 받기 구현
- MediaEndedCommand가 실행 된 후 로직 구현
- RecognizeWithUIAsync를 사용해서 음성 입력 받기
- UIOptions 수정

 

 

 

Part 6

 

* 단문 연습 페이지 구현 - 틀렸을 경우 처리와 반복 학습 처리 구현
* MainViewModel.cs 추가 구현
- HasStart 프로퍼티로 변경
- 음성 스트림 생성 부분 메소드로 변경
- 한국어일 때와 영문일 때 음성 스트림 생성 방법 다르게 구현
- 음성 입력 부분 메소드로 변경
- 틀렸을 때 영문 음성 출력이 되도록 구현(SSML 사용)
- 영문 음성 시작전 1초의 딜레이 추가
- 반복 학습을 위해 랜덤 단어 선택 부분을 메소드로 변경

 

 

 

Part 7

 

* 단문 연습 페이지 구현 - 종료 버튼 처리
* Target Version을 변경해서 Property Maker를 이용한다.
* MainPage.xaml 화면 추가 구현
- BoolToVisibilityConverter를 추가해서 버튼 보이기/숨기기 작업

 

 

 

PPT

 

iot-tts.pptx

다운로드