블로그 이미지
* Microsoft MVP - Windows Development 2014 ~ 2019 5ring * LINE : kaki104 * facebook : https://www.facebook.com/kaki104 https://www.facebook.com/groups/w10app/ kaki104

카테고리

List All (550)
Xamarin Forms (4)
Bot Framework (18)
Azure (9)
Windows 10 (35)
Facebook News & Tips (158)
Windows App(Universa.. (83)
Windows 8&8.1 (113)
Windows Phone 8 (42)
Silverlight (37)
HTML5 & MVC4 (16)
WPF (1)
Portable Class Library (2)
Uncategorised Tips a.. (3)
Kinect for Windows (2)
ETC (12)
kaki104 Scrap (4)
App News (11)
Total519,087
Today51
Yesterday98



이번 강좌는 지난번에 만들었던 영어 단문 발음 연습 앱에 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



Posted by MVP kaki104

티스토리 툴바