- 개발환경 설정
- Google Cloud TTS API 활성화하기
- 코드 작성
이번 포스팅에서는 TTS를 활용하여 음성을 출력할 것 입니다. TTS 서비스를 사용하면 일반 텍스트 언어가 음성으로 변환하여 출력됩니다.
TTS 활용하여 음성 출력하기
1. 개발환경 설정
- 디바이스 추가하기
ares-setup-device라즈베리파이를 시작하고 다음 명령어를 사용하여 디바이스를 추가해줍니다.
이때 select는 add를 선택하고, 사용한 기기에 할당된 ip 주소를 명령창에 입력해줍니다. 기기의 이름은 원하는대로 설정해주면 됩니다.
2. Google Cloud TTS API 활성화하기
TTS 서비스를 사용하기 위해서는 Google Cloud TTS API를 활성화해야합니다. 다음 webos 공식 사이트를 참고
- 구글 클라우드 계정에 로그인하여 결제를 활성해줍니다. API를 사용하기 위해서는 결제 계정이 필요합니다.
- 프로젝트를 생성한 후 Cloud Text-to-Speech API 사용 설정을 해줍니다.
- 서비스 계정 만들기를 클릭하여 역할은 프로젝트-> 소유자로 선택하여 만들어줍니다.
- 서비스 계정 관리 카테고리에서 작업 밑에 있는 더보기 버튼을 누르고 키만들기를 클릭하여 JSON 유형으로 비공개 키를 저장해줍니다.
- 파일 이름을 'google_tts_credentials.json' 으로 바꿔줍니다.
- .json 파일을 대상 장치에 복사합니다.
- 장치 터미널에서 다음 명령을 실행합니다.
mkdir /etc/google - 파일을 /etc/google/google_tts_credentials.json에 복사합니다 .
set GOOGLE_APPLICATION_CREDENTIALS=C:\Users\Qeen\Downloads\google_tts_credentials.jsonJSON 파일은 다운로드에 저장됩니다. 따라서 다음 명령어를 통해 환경변수를 등록해줍니다.
그리고 난 후 대상 디바이스에 google_tts_credentials.json 파일을 복사해줘야 합니다.
ares-shell -d [device name]위 명령어를 통해 대상 디바이스의 shell로 바로 연결합니다. 1번에서 추가해주면서 설정한 device의 이름을 입력해주면 됩니다.
디바이스의 shell에서 새로운 폴더를 하나 만들어주고,
vi google_tts_credentials.json다음과 같이 입력하여 파일을 만들어주고 i를 통해 편집해줍니다.
'vi'는 리눅스에서 사용하는 에디터로 만약 vi뒤에 입력된 파일이 존재하지 않으면 새로 만들어주고, 존재한다면 해당 파일을 열어줍니다. 또한 i를 통해서 편집모드로 바꾸어 입력 가능한 상태가 됩니다.
json파일에 있는 내용을 모두 복사/붙여넣기 해주고 esc-> :wq를 눌러줍니다.
리눅스에서 esc를 누르면 명령모드가 되어 ':wq' 명령어를 통해 저장 및 종료해줍니다.
3. 코드 작성
- 전체 코드
-
<!-- Copyright (c) 2020 LG Electronics Inc. SPDX-License-Identifier: Apache-2.0 --> <!DOCTYPE html> <html> <head> <title>Example Web App</title> <style type="text/css"> body { background-color:#202020; } h1 { padding:20px; color:#FFFFFF; } .button-section { padding-left: 20px; } </style> <script type="text/javascript"> let bridge = new WebOSServiceBridge(); function speak() { let url = "luna://com.webos.service.tts/speak"; let params = { "text":"안녕하세요. COSMOS 입니다.", "language":"ko-KR", "clear":true }; bridge.onservicecallback = ()=>{console.log(res);}; bridge.call(url, JSON.stringify(params)); } </script> </head> <body> <div> <h1 id="txt_msg">Hello, Web Application!!</h1> <div class="button-section"> <button onclick="speak()">Speak Hello</button> </div> </div> </body> </html>
웹 브라우저가 javascript 를 인식하고 Text를 통해서 script를 구현합니다.
speak() 함수를 만들고 웹 브라우저에서 무엇을 어떻게 말해야 하는지에 대한 모든 관련 데이터를 포함하는 음성 요청 객체인 발화 객체 url을 입력합니다. 이 개체는 음성을 생성할 speak() 함수로 전달됩니다.
아래의 html 코드에 따라 "Speak Hello" 가 쓰여진 버튼을 누르면 speak() 함수에 있는 text "안녕하세요. COSMOS 입니다." 가 음성 출력됩니다.
- TTS 활용한 음성 출력 demo
'webOS Article > 2. Luna Service 활용하기' 카테고리의 다른 글
| Bluetooth 사용하기 2 - 채팅앱 만들기 (0) | 2021.10.03 |
|---|---|
| Bluetooth 사용하기 1 (0) | 2021.09.14 |
| media 불러오기 (0) | 2021.08.14 |
| Database 사용하기 (DB8) (0) | 2021.08.14 |
| Luna Service API 호출하기(by Enact App) (0) | 2021.07.24 |