웹톡스 Javscript TTS API Guide Documents

Webtalks_APISBILLBOARD-01_0

웹톡스 Javascript API 적용메뉴얼

[WebTalks TTS API 개요]

<적용 매뉴얼 소개>

서버기반 온라인 Text To Speech 서비스/솔루션 웹톡스 API는 온라인 애플리케이션의 텍스트를 음성으로 실시간으로 생성하고 오디오파일을 재생할 수 있도록 해 줍니다.

웹사이트, 플래시 혹은 PC or 서버 애플리케이션, 모바일기기의 하이브리드 혹은 네이티브앱을 포함하는 모든 온라인 프로그램에 사용이 가능합니다.

유일하게 필요한 사항은 48kbps 오디오파일을 송신할 수 있는 인터넷망에 당신의 애플리케이션이 연결되어 있는 것 입니다.

웹톡스 API는 귀사의 애플리케이션과 연동된 오디오 생성과 오디오조절 설정을 위해 가장 사용하기 편리한 Javascript/HTML5과 HTTP API를 제공합니다.

웹톡스 API는 20개 이상의 언어를 지원하며, 각 해당 언어 별 복수의 목소리지원이 가능합니다. 영어 등 몇 가지 목소리는 태그 설정 등을 통해 다양한 의성어와 효과의 목소리 표현이 가능하며 또한 모든 목소리의 속도/볼륨/음질 조절이 가능합니다.

<API선택 방법>

귀사의 애플리케이션 연동과 가장 적젏한 API선택을 위해서 다음을 참고 하기 바랍니다.

  • 웹사이트 – Javascript API ( 모바일 브라우저 지원)
  • 단독 애플리케이션(모바일앱 포함) – HTTP API
  • 서버 애플리케이션 – HTTP API

주의) 모바일, 데스크탑 또는 서버 든 API선택의 결정은 웹브라우저의 사용 유무에 달려 있습니다.

웹브라우저를 사용한다면 Javascript API, 사용하지 않는 다면 HTTP API를 사용하기 바랍니다.

보다 상세한 적용방법을 원한다면 다음의 API적용방법 상세문서를 참고하시고 당사 기술팀으로 문의 주시기 바랍니다. (기술지원문의 : suzie@suzisfot.com)

[홈페이지에 웹톡스 Javascript TTS API를 적용하기 위한 방법]

웹톡스는 아래의 예시 코드처럼 한 줄의 자바스크립트 호출 코드를 삽입함으로써 작동됩니다. 웹톡스가 웹 페이지에서 정상적으로 작동하기 위해서는 몇 가지 기준만 지켜주시어 웹 페이지를 작성하시면 됩니다.

기본적으로 웹 페이지는 웹 표준에 맞게끔 제작이 되면 좋습니다. 그리고 웹톡스가 작동하여 음성으로 변환하고자 하는 영역의 텍스트에 id 값을 주어야 합니다. 그 id 를 기준으로 음성으로 변환하고자 하는 텍스트를 추출하게 됩니다. 최소한 위의 조건이 맞아야 웹톡스가 웹 페이지에서 최적으로 작동하게 됩니다.

 

[웹톡스 자바스크립트 호출 코드 기본 예시 – 기본 음성듣기 아이콘버튼 사용 시]

  • 기본형 :

<script type=”text/javascript” src=”http://www.webtalks.co.kr:80/webtalksJs.odc?userlicenseKey=cc339f6a213ca211c6b37f3409e83bc5de15f2267d4895aec921e4957a0304cbb8417c27f77621c2a5bec18136694c8c”></script>

  • 커스텀형:

<script type=”text/javascript” src=”http://www.webtalks.co.kr:80/webtalksJs.odc?userlicenseKey=cc339f6a213ca211c6b37f3409e83bc5de15f2267d4895aec921e4957a0304cbb8417c27f77621c2a5bec18136694c8c&custom_targetId=imsiContentsArea&custom_languagePack=EW1“></script>

=> 특정 페이지에서 콘텐츠 영역 id값이 다르고 영어 발음으로 음성이 나와야 할 경우 등

아래와 같은 단계로 웹톡스를 적용하시기 바랍니다.

1단계 : 웹 페이지를 제작할 때 음성으로 변환되어야 하는 콘텐츠 영역의 id값 주기

콘텐츠 영역의 id값을 웹 페이지 전체적으로 일관되게 유지하면 웹톡스를 적용하기가 한결 쉽습니다. 웹사이트 전체가 콘텐츠 영역의 id값이 같게 유지되면 삽입될 [웹톡스 자바스크립트 호출 코드]는 모든 웹 페이지에서 같게 됩니다. 따라서 공통영역에 [웹톡스 자바스크립트 호출 코드]를 삽입함으로써 한 번에 적용이 완료됩니다.

만약 웹 페이지마다 콘텐츠 영역 id값이 다를 경우 해당 웹 페이지마다 [웹톡스 자바스크립트 호출 코드]를 삽입하여야 합니다.

그리고 삽입되는 [웹톡스 자바스크립트 호출 코드]의 파라메터를 수정하여 적용 하셔야 합니다. 위의 예시의 커스텀형태로 구성하여야 합니다.

[웹 페이지 소스 코드 예시]

<!– main contents –>

  <div id=”mainContents”>

                <a name=”contents”></a>

                <!– 내용 시작 –>

                             <p>안녕하십니까?<br /> … 내용들..

  <!– //내용 끝 –>

  </div>

위의 소스 코드 예시에서 콘텐츠 영역의 id값은 “mainContents”입니다. 모든 웹 페이지가 동일한 콘텐츠 영역의 id값을 유지하시는 것이 좋습니다.

만약 콘텐츠 영역의 id값이 없는 경우는 웹 페이지 전체를 대상으로 음성으로 변환되어 의도되지 않은 결과가 발생합니다. 반드시 웹 페이지에는 콘텐츠 영역의 id값이 있는 것이 좋습니다.

2단계 : 웹 페이지에 [웹톡스 자바스크립트 호출 코드] 삽입하기

[웹톡스 자바스크립트 호출 코드] 는 당사가 전달해 드리거나 웹톡스 서버 관리자 페이지에서 확인하실 수 있습니다.

전달 받으신 [웹톡스 자바스크립트 호출 코드]를 “음성듣기” 아이콘이 출력되고자 하는 위치에 넣어 주시면 됩니다. 아이콘이 출력될 위치는 웹 페이지 디자인과 css 설정에 따라 결정됩니다.

예를 들어 기본적은 음성듣기 아이콘 배너는 다음과 같은 형태가 됩니다.<<

<WebTalks Player 예시>

 k-917  k-915
 k-918  k-916
 k-920
 k-921 k-922

[html 소스코드 예시]

… html 코드 ..

<!– 웹톡스가 출력되고자 하는 곳 –>

<div class=”entry”>

  <p><script type=”text/javascript” src=”http://www.webtalks.co.kr:80/webtalksJs.odc?userlicenseKey=cc339f6a213ca211c6b37f3409e83bc5de15f2267d4895aec921e4957a0304cbb8417c27f77621c2a5bec18136694c8c”></script></p>

</div>

… html 코드

위와 같이 1, 2단계로 진행을 하셨으면 적용된 웹 페이지에 웹톡스 음성지원이 작동될 것입니다.

[웹톡스 자바스크립트 호출 코드 기본 예시 – 커스텀 음성듣기 아이콘버튼 사용 시]

OOO기업의  www.OOO.com 도메인의 웹톡스 스크립트는 다음과 같다고 가정합니다.

<script type=”text/javascript” src=”http://koreatimes.webtalks.co.kr:80/webtalksJs.odc?userlicenseKey=0fdc9904b4fdf1ccf4f01cd5d995531236e0c7fc6368d98c30ba5a2356ecbbe9493fd54a748e3a4ef12ac5ef3e3d4257“></script>

위의 코드는 코드가 삽입된 위치에 웹톡스 음성듣기 버튼이 자동으로 출력됩니다.

[1단계]

웹톡스의 기본 음성듣기 버튼이 아닌 해당 홈페이지의 이미지를 이용하고자 할 때는 위의 스크립트에 다음과 같이 변경 합니다.

<script type=”text/javascript” src=”http://koreatimes.webtalks.co.kr:80/webtalksJs.odc?userlicenseKey=0fdc9904b4fdf1ccf4f01cd5d995531236e0c7fc6368d98c30ba5a2356ecbbe9493fd54a748e3a4ef12ac5ef3e3d4257&custom_btn_id=webtalksCustomBtn“></script>

위의 코드에는 라이센스 키 다음에 커스텀 코드가 추가되어 있습니다.

&custom_btn_id=webtalksCustomBtn

  • custom_btn_id 다음의 webtalksCustomBtn 값은 홈페이지에 맞게 유일한 값으로 변경 가능합니다

예를 들어 &custom_btn_id=OOOVoiceButton과 같이 임의로 변경 가능합니다.

위의 스크립트 코드를 페이지 소스 맨 하단 </body> 위에 카피합니다.

[2단계]

그리고 음성듣기 버튼은 홈페이지에 만드신 후 다음과 같이 클릭이벤트를 추가합니다.

id=”webtalksCustomBtn”

onclick=”webtalks_js.Player.voiceOnStartCheck();” 

예를들어 [음성듣기] 버튼을 다음과 같이 하였을 경우

<img src=”play.png” alt=”커스텀 음성듣기버튼” title=”커스텀 음성듣기버튼” height=”17″ />

아래처럼 코드를 추가해 줍니다.

<img src=”play.png” id=”webtalksCustomBtn” onclick=”webtalks_js.Player.voiceOnStartCheck();” style=”cursor:pointer;” alt=”커스텀 음성듣기버튼” title=”커스텀 음성듣기버튼” height=”17″ />

 

[웹톡스 자바스크립트 호출 코드 구성]

[웹톡스 자바스크립트 호출 코드]는 다음과 같은 선택적인 파라미터를 가지고 다양한 방법으로 호출하게 됩니다. 용도와 목적에 따라 변형해서 사용하시기 바랍니다.

파라메터

필수

여부

설명

userlicenseKey 필수 웹톡스를 적용하고자 하는 웹사이트의 라이센스 키.

웹톡스 서버에서 발급되며 암호화된 문자열이며 이 값은 서버에 등록된 값과 일치하여야 합니다.

서버에서 자동 발급된 값이므로 임의로 변경불가.

custom_targetId 선택 웹톡스가 적용될 콘텐츠 영역의 id값.

초기 설정 값으로 웹톡스 서버에 셋팅이 되므로 파라메터 값이 없을 경우는 서버의 설정 값으로 대체됨.

웹 페이지에서 id값을 다르게 줄 경우 사용함.

cutom_autoload 선택 웹톡스가 음성파일을 만드는 규칙에 대한 설정값. true의 경우 최초 사용자가 페이지 로드 시 자동으로 음성파일 생성됨. 설정 중지 시 설정값을 false로 변경 기본값=ture
cutom_autoplay 선택 웹톡스가 플레이되는 규칙에 대한 설정값. true의 경우 사용자가 페이지 로드 시 자동으로 음성파일 실행됨.

설정 중지 시 설정값을 false로 변경. 기본값=false

custom_callback 선택 웹톡스 음성플레이어가 완료되고 난 이후에 실행하고자 하는 자바스크립트 함수명.
custom_autoplayStart 선택 웹톡스 음성플레이어가 뜨면서 자동음성으로 나오지 않게 할 때 사용. 기본값=ture

 

아래는 개발자가 추가할 수 있는 파라미터에 대한 추가 설몇 및 예제

  • custom_targetId 는 특정 웹페이지의 콘텐츠 영역 id값이 다를 경우에 사용합니다.[공통 id는 시스템에서 지정]

예) custom_targetId=imsiContentsArea

 

  • custom_autoload 은 해당 웹페이지의 사용자 호출 시 자동으로 음성을 만드는 경우 사용합니다.

예) custom_autoload=true <== 해당 웹페이지를 초기 호출 시 자동으로 음성파일을 만들어 주는 방식의 코드 입니다. 최초 웹페이지 텍스트음성변환 이후 다음 사용자들은 기존의 만들어진 음성파일을 캐시를 통해 호출하는 방식입니다. [ 음성변환해야 하는 콘텐츠 분량과 건수가 많은 경우 추천 ]

 

  • custom_autoplay는 특정 웹페이지의 사용자 호출 시 자동으로 음성을 만들고 플레이 시켜주는 방식의 코드입니다..

예) custom_autoload=true <== 해당 웹페이지를 초기 호출 시 자동으로 음성파일을 만들고 플레이 시ㅕ 주는 방식의 코드 입니다. 사용자가 음성듣기 버튼을 클릭하지 않아도 자동으로 음성으로 들어야 하는 경우 사용하는 방식입니다.[ 웹페이지 호출 이 많은 경우 시스템에 무리를 줄 수 있습니다.]

 

  • custom_callback 은 음성이 완료된 이후에 실행하고자 하는 자바스크립트가 있는 경우에 사용합니다.

예) custom_callback=callback_test <== callback_test 란 자바스크립트 함수가 페이지에 존재 하여야 함.

HTTP API 바로가기