itri tts@ web logo

 

JavaScript API

應用特色

使用SOAP通訊協定傳輸 間接 TTS download程式碼 不需要
操控自由度 Domain name 需要
合成音檔下載處理 License Code 需要

簡介

本服務提供JavaScript範例程式供一般使用者使用於html環境(非php、asp等)下使用。

JavaScript API 架構示意圖

應用教學

Step1. 取得帳號/密碼

請先註冊成為會員取得帳號/密碼

 

Step2. 網址設定和取得License Key

點選修改個人資料,進行網址設定和取得License Key

 

Step3. 載入js檔案

在head標籤中加入script標籤,來源為http://tts.itri.org.tw/TTScript/Text2SpeechJsApiV2.php?key=YourLicense",YourLicense為剛剛取得的Lincense key

<!doctype html>
<html>
<head>
<script language="javascript" src="http://tts.itri.org.tw/TTScript/Text2SpeechJsApiV2.php?key=YourLicense"></script>
</head>
<body>
</body>
</html>

 

也可以在body中任意位置加入。

另外 將此段代碼直接複製到body中任意位置,可直接在網頁中產生一個widget

<script language="javascript" src="http://tts.itri.org.tw/TTScript/Text2SpeechJsApiV2.php?key=YourLicense"></script>
<script language="javascript" src="http://tts.itri.org.tw/other/webttstest.js"></script>

TTS widget範例網頁

 

Step4. 開始使用javascript api

首先,new一個tts

new TTS()

或使用變數

var tts = new TTS();

範例:

<!doctype html>
<html>
<head>
<script language="javascript" src ="http://tts.itri.org.tw/TTScript/Text2SpeechJsApiV2.php?key=YourLicense"> </script>
</head>
<body>
<div id="content">
<div id="mute">不想聽到的內容</div>
<div class="mute">不想聽到的內容</div>
將會聽到的內容
</div>
<script language="javascript">
    var tts = new TTS();
</script>
</body>
</html>

 

Step5. 了解如何設定參數(已給預設值)
muteTag

設定不合成的tag,格式為”attribute:name|attribute2:name…” (支援attribute:id、name、class)。
在原有網頁架構下,透過指定合成的標籤,在該標籤中,有可能會有多餘的、不希望合成的標籤,此時,可以設置TTS.muteTag。

設定範例:
    var tts = new TTS();
    tts.muteTag = "id:tagname|class:classname"

 

PlayerSet.hidden

設定播放器隱藏(true)/顯示(false)。

設定範例:
    var tts = new TTS();
    tts.PlayerSet.hidden = false

 

PlayerSet.width

設定播放器寬度。

設定範例:
    var tts = new TTS();
    tts.PlayerSet.width = 100

 

PlayerSet.height

設定播放器高度。

設定範例:
    var tts = new TTS();
    tts.PlayerSet.height = 30

 

範例:

<!doctype html>
<html>
<head>
<script language="javascript" src ="http://tts.itri.org.tw/TTScript/Text2SpeechJsApiV2.php?key=YourLicense"> </script>
</head>
<body>
<div id="content">
<div id="mute">不想聽到的內容</div>
<div class="mute">不想聽到的內容</div>
將會聽到的內容
</div>
<script language="javascript">
    var tts = new TTS();
    tts.muteTag = "id:mute|class:mute";
    tts.PlayerSet.hidden = false;
    tts.PlayerSet.width = 100;
    tts.PlayerSet.height = 30;
</body>
</html>
</script>

註1: 只要new一次tts(),該變數即可使用所有參數。

註2:每個參數都有預設值,可不設定。

 

Step6. 了解如何使用合成函式(ConvertInit, ConvertCustom)

 

ConvertInit

合成函式,已預設icon。

各參數說明如下:

  • StringOrObj(string) – 輸入欲合成的TTS文字
  • mediaID(string) – 嵌入播放器的HTML DOM ID
  • TTSSpeaker(String) – 可選擇語者(參考 Web Service API 表三),預設值為Bruce(可使用空值)
  • Volume(Integer) – 其音量大小可調整範圍為0~100,預設值為100(可使用空值)
  • Speed(Integer) – 其語音速度可調整範圍為-10~10預設值為0(可使用空值)
  • pitchLevel(Integer) – 韻律調整:值越大則音高越高;反之則音高越低,可調整範圍-10~10,預設值為0(可使用空值)
  • pitchSign(Integer) – 韻律調整:0=正常、1=像機器人、2=像外國人說中文,預設值為0(可使用空值)
  • pitchScale(Integer) – 韻律調整:值越大則抑揚頓挫越明顯;反之則越趨平版,可調整範圍0~20,預設值為5(可使用空值)
  • 函式範例:
        var tts=new TTS();
        tts.ConvertInit(""id:x","media","Bruce","100","0","0","0","5")

 

ConvertCustom

合成函式,需自定event去觸發。

各參數說明如下:

  • StringOrObj(string) – 輸入欲合成的TTS文字
  • mediaID(string) – 嵌入播放器的HTML DOM ID
  • TTSSpeaker(String) – 可選擇語者(參考 Web Service API 表三),預設值為Bruce(可使用空值)
  • Volume(Integer) – 其音量大小可調整範圍為0~100,預設值為100(可使用空值)
  • Speed(Integer) – 其語音速度可調整範圍為-10~10預設值為0(可使用空值)
  • pitchLevel(Integer) – 韻律調整:值越大則音高越高;反之則音高越低,可調整範圍-10~10,預設值為0(可使用空值)
  • pitchSign(Integer) – 韻律調整:0=正常、1=像機器人、2=像外國人說中文,預設值為0(可使用空值)
  • pitchScale(Integer) – 韻律調整:值越大則抑揚頓挫越明顯;反之則越趨平版,可調整範圍0~20,預設值為5(可使用空值)
  • 函式範例:
        var tts=new TTS();
        tts.ConvertCustom(""id:x","media","Bruce","100","0","0","0","5")

 

範例:

<!doctype html>
<html>
<head>
<script language="javascript" src ="http://tts.itri.org.tw/TTScript/Text2SpeechJsApiV2.php?key=YourLicense"> </script>
</head>
<body>
<div id="content">
<div id="mute">不想聽到的內容</div>
<div class="mute">不想聽到的內容</div>
將會聽到的內容
</div>
<script language="javascript">
    var tts = new TTS();
    tts.muteTag = "id:mute|class:mute";
    tts.PlayerSet.hidden = false;
    tts.PlayerSet.width = 100;
    tts.PlayerSet.height = 30;
    tts.ConvertInit("id:content","media","Bruce","100","0","0","0","5");
</script>
</body>
</html>

 

Step7. 在網頁上直接呈現撥放控制列,點喇叭圖示後可以馬上做語音合成進行播放

回傳參數: 無(直接在目標ID中產生撥放控制列)

請點選網頁中最左下方的喇叭圖示撥放喇叭,可立即聆聽網頁內容的撥放。