'2018/01'에 해당되는 글 5건

Windows 10 IoT Core에 음성으로 명령을 내려서 음악을 재생, 다음곡, 이전곡, 장르 검색의 기능을 수행하는 UWP 앱을 개발하는 과정을 동영상으로 만들었습니다. 개발 소스, 동영상, ppt를 참고하시면 여러분도 멋진 앱을 만드실 수 있을 것이라고 생각합니다.

감상하시기 전에 유튜브 채널 구독 신청 부탁드립니다~. 유튜브 채널 바로가기

완성된 앱 시연 영상

Part 1

* 환경 및 준비
* 참고 자료
* Media Player
* SRGS
* IoT Player with voice commands
* Begin Playback
* PC 환경 설정 확인
* 앱 개발 순서
* 뮤직 플레이 페이지 구현 로직

Part 2

* 프로젝트 추가
* package.appmanifest 설정
* 앱 초기화 모듈 구현
- 외장 디스크 연결 확인
- 일단 음악 재생이 되도록 작업
* MediaPlayerViewModel.cs
- Navigation_Navigated 구현
- 음성 인식 초기화
- MediaPlayerElement 초기화

Part 3

* SRGS 만들기
- begin playback
* MediaPlayerViewModel.cs
- SRGS 파일 불러와서 음성 인식 컴파일
* 시작 페이지를 MediaPlayerPage로 변경
* MediaPlayerViewModel.cs
- 시작하면서 음성 인식 시작 하도록
- 음성 인식 후 넘어오는 데이터 확인
- tag에 ECMAScript를 이용해서 반환 결과 변경
- 음성 인식 결과 확인
- 음성 인식 결과를 action에 넣어서 어떤 명령인지 구분해서 명령 실행
- BeginPlaybackAsync() 실행
- DispatcherHelper 초기화, 사용
- 결과 확인

Part 4

* 음성 입력 대기 상태 구현 및 음성 명령 종류에 따른 분기 처리 시작
* SRGS에 기능 추가
- pause playback
- MediaPlayerViewModel에도 pause playback 구현
- stop playback
- next playback
- previous playback
* MediaPlayerPage.xaml 디자인 작업
- Binding

Part 5

* Begin playback 구현
* MediaPlayerViewModel.cs
- InitPlaylistAsync()
- 외장 드라이브에서 파일 목록 가지고오도록...
- BeginPlaybackAsync() 수정
- GetMusicPropertiesAsync()를 사용해서 타이틀, 앨범, 아티스트, 이미지 출력
- PosterSource 수정
* MediaPlayerBehavior 추가 및 구현
- CurrentPlaybackState 추가
* MediaPlayerBehavior를 MediaPlayerElement와 연결 - blend
- Binding
* MediaPlayerViewModel.cs
- Init() 수정 - PropertyChanged 추가
* MediaPlayerBehavior 수정
- MediaPlayer를 MediaPlayerElement에 추가

Part 6

* 외장 드라이브에서 파일 목록 가지고 오는 것 포기!! 그래서 Music Library에서 파일 목록을 가지고 오는 방법으로 변경
- SD 카드에 Music Library에 파일 복사하기..
* MediaPlayerViewModel.cs
- CreateFileQueryWithOptions()를 이용해서 파일 필터링과 목록 조회를 동시에
* Pause playback 구현
* CommandMediaPlayer enum 추가
- Messenger를 이용해서 MediaPlayerBehavior에 명령 전달
* MediaPlayerBehavior 수정
- Messenger 구독
- Source 프로퍼티 추가
- ExecuteCommandMediaPlayer 구현

Part 7

** Next, Previous 기능 구현 동영상은 생략 합니다.

(편집했는데..날려서..ㅜㅜ 혹~~~~~~시라도..필요하다고 하시는 분이 계시면..한 10분 정도;; 그러면 다시 편집해서 추가하도록 하겠습니다~)

* 음악 검색 기능 구현
- Filter 추가
* MediaPlayerViewModel.cs
- SelectSourceAsync()
* SRGS.xml 파일에 장르 추가
- 재생 완료 후 다음 곡으로 넘어가는 기능 구현
- ContinuousRecognitionSession_Completed 이벤트 발생 이유에 대해..
* 존재하지 않는 장르를 이야기하면 미친듯이 돌아가는 버그!! 잡아주세요

PPT

iot-mediaplayer.pptx

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

IoT Core에서 동작하는 Speech Recognition에 대한 내용입니다.

ppt작성, 코딩, 촬영, 편집까지.. 시간이 많이 걸리내요.. 아침에 일어나서 바로 시작한 작업인데..밤새고 새벽에..쿨럭..

음성 인식에 대해서 처음 접하시는 분들이 보시고 이해하실 수 있으면 좋겠습니다. 

앞으로 지속적으로 음성 인식과 연결된 주제에 대해서 동영상을 만들려고 합니다. 그 끝에는 어떤 것이 있을까요?

높은 산의 꼭데기만 보고 뛰어서 올라가면 힘이 마니 듭니다. 하지만, 산 아래에서 부터 천천히 꾸준히 올라간다면, 아무리 높은 산이라도 정복 할 수 있습니다. 그러니, 모두 함께 천천히 올라갔으면 좋겠습니다.

마지막, 한가지 작은 부탁이라면, 유튜브 구독자가 좀더 늘었으면 하는..후후

유튜브 채널 바로가기

Part 1

* 환경 및 준비
* 참고 자료
* Speech Recognition Constraints
* Speech Recognition 기초
* SpeechRecognizer
* List of speech recognition supported languages

Part 2

* 영어 말하기 연습 앱 개발
* PC 환경 설정 확인
* 앱 개발 순서
* 프로젝트 생성
* 세팅

Part 3

* 영어 단문을 CSV 파일로 생성
* 생성한 파일 프로젝트 추가하고 빌드시 앱 설치 폴더에 복사되도록 설정
* 파일을 읽어서 ShellPage CaseList 프로퍼티에 추가
* GitHub에 Project생성
* To-do 등록 - issues로 변경

* 브랜치 생성

* PR 생성

Part 4

* 기본 연습 페이지 구현 시작
* MainPage.xaml.cs 코딩
- SpeechAndTTS 셈플 프로젝트 중 Scenario_ListConstraint의 코드를 복사해서 붙여 넣는 방법으로 기본 작업
- OnNavigateTo 코딩
- AudioCapturePermissions 클래스 복사
- InitializeRecognizerAsync 코딩
- CommonHelper 클래스 추가, ShowMessageAsync 추가

Part 5

이번 포스트 주제는 Windows 10 IoT Core - Hello World 입니다.

IoT를 처음 시작하시려는 분들을 위한 포스트로, 자세하게 설명하고 있습니다. 앞으로 동영상의 방향은 IoT를 이용한 여러가지 앱을 만들어서 응용하는 방향으로 진행할 예정입니다.

많은 구독 신청 부탁드립니다.

Part1

*Why Windows 10 IoT Core?
Windows 10 IoT Core Compatible Boards
Raspberry Pi 3 kits
What can you make?
라즈베리파이에 윈도우 설치 및 설정
해상도 설정 참고 자료

Part2

Hello World Windows 10 IoT Core

PPT

iot-helloworld.pptx

이번 포스트는 GitHub와 VS를 이용해서 어떻게 프로젝트를 관리하는가에 대한 내용입니다.

5개의 part로 구분되어 있으며, 각 part별 내용은 바로 상단에 있으니 필요한 내용을 바로 찾아서 보실 수 있을 것 같습니다.

앞으로 GitHub를 이용해서 오픈 소스 프로젝트를 진행하기 위한 준비 단계이니 꼭~ 참고해 주세요

혹시 내용 중 수정 사항은 이곳에 리플로 남겨주시거나 메일로 알려주시면 수정하도록 하겠습니다.

ps. diablo3hub앱은 빌드 후 실행 가능하게 수정하도록 하겠습니다.

-> 수정 완료했습니다.

Part1
환경 및 준비
참고 자료
What is GitHub?
Why git for developer
GitHub 가입

Part2
GitHub Flow - Create a branch
GitHub Flow – Add commits
GitHub Flow – Open a Pull Request
GitHub Flow – Discuss and review your code
GitHub Flow – Deploy
GitHub Flow – Merge

Part3
GitHub – New repository
GitHub – Project 추가
GitHub – Extension download and install
UWP 프로젝트 추가, 커밋, 싱크

Part4
GitHub – Collaborators 추가
GitHub – Clone repository
GitHub – VS와 연동 작업

Part5
GitHub - Fork 후 작업하기

PPT

GitHub와VS연동작업.pptx