2013年4月16日

工研院 文字轉語音 Web 服務 JavaScript API 無法使用

前言複製自發出去的信中
這是第二封
第一封有回應我
不知道為什麼這封沒回應
反正可以正常使用了
不管他

之前做過用現成的Flash音樂播放器 播放Google翻譯語音的方式實現在自己的網頁播放語音
而用工研院的語音就方便很多
不需要用到Flash
還可以選人聲



內文我以這個網頁教學最後的範例作為我的網頁內容
http://tts.itri.org.tw/development/javascript_api.php

程式碼如下： 
<!doctype html>

<html>

<head>

<script language="javascript" src ="http://tts.itri.org.tw/TTScript/Text2SpeechJsApiV2.php?key=myLicense"> </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");

</body>

</html>

</script>


結果是無法運行
我從Firefox console中收到了一些JavaScript錯誤訊息
是來自這個網址的JS檔案(http://tts.itri.org.tw/TTScript/Text2SpeechJsApiV2.php?key=myLicense)

所以我做了一些修正：

1.首先是這個範例架構有問題，</html>的位置不對，應該要放在最後面。
這應該是筆誤? 也不是主要問題的所在。

2.我在<body>中增加了一個<div id="media">，位置如下： 
<div id="content">

<div id="mute">不想聽到的內容</div>

<div class="mute">不想聽到的內容</div>

將會聽到的內容

</div>

<div id="media"></div>


3.為了修改出錯的JS檔案，我新建一個JS檔案在我的伺服器，內容複製自出錯的JS檔案。

4.這個JS檔案第189行到194行 
189.  var inDomIdchildNodes = document.getElementById(inDomId).childNodes;

190.  for(var i=0;i<inDomIdchildNodes.length;i++){

191.      if(inDomIdchildNodes[i].id.match("newMediaPanel")){

192.          removeAllChild(inDomIdchildNodes[i]);

193.      }

194.  }

首先是189行inDomId這個變數根本沒定義

如果inDomId是167行
inDomId = mediaID;
的意思的話，第196行
if(inDomIdchildNodes[i].id.match("newMediaPanel")){
其中的inDomIdchildNodes[i]以我的網頁架構來看也不會有id這個屬性

我索性刪除了第189行到194行

5.經過我以上的修改，文字轉語音的程式就能正常運行了。
發表於: | 標籤:

11 則留言:

  1. tts新手2013年9月21日 晚上8:58

    想請教一下大大第三步開始

    3.為了修改出錯的JS檔案，我新建一個JS檔案在我的伺服器，內容複製自出錯的JS檔案。

    請問上述動作中的JS檔在哪呢??

    回覆刪除
  2. tts新手2013年9月21日 晚上11:12

    大大你好~

    非常謝謝你,已成功文字轉語音!!
    已研究好多天(汗...)

    我原本是用Dreamweaver cs6去做網頁發聲,
    但是中文會變成亂碼@@"

    後來就直接改用記事本去做,就直接可以正常顯示中文,
    這TTS還挺有趣的 呵~

    還有個題想請教,
    就是那個播放器圖示似乎被截斷了,請問這是這常現象嗎??

    回覆刪除
  3. Likey2013年9月21日 晚上11:37

    >Dreamweaver cs6去做網頁發聲
    如果主要是寫 JS 程式設計的方面
    還是建議自己用手刻

    >播放器圖示似乎被截斷了,請問這是這常現象嗎??
    這我不太清楚呢
    我猜是CSS的問題吧?
    設定一下播放器大小
    放大一點也許圖示就能完整被顯示了


    瀏覽器的console會活用的話
    就算被截斷
    你還是能找到問題點
    把他改成你想要的樣子

    回覆刪除
  4. tts新手2013年9月22日 上午9:11

    好的!!

    謝謝你~ :D

    回覆刪除
  5. tts新手2013年9月22日 晚上10:04

    大大你好~

    我剛剛在測試我的TTS發音發現突然不能轉語音且一直呈現讀取的狀態

    而且剛剛也測試了一下大大的DEMO發現有同樣問題

    後來也測試了工研院官網下面按了一下試聽鈕,也是如此

    想請教說,是我個人電腦出包,還是有什麼網路或瀏覽器問題嗎??

    回覆刪除
  6. Likey2013年9月22日 晚上10:11

    我也是這樣
    工研院出問題吧0.0

    回覆刪除
  7. tts新手2013年10月11日 中午12:25

    大大你好~先前有向你請教有關TTS問題也謝謝你的回覆,學到很多,後來的圖示被砍掉的狀況我改了參數後就正常了

    目前我使用ASP.net環境,我想請教的是,因為TTS是JS寫成,所以自然而然會寫在client端(aspx),但是可否將它改為在server端(aspx.cs)使用呢??

    回覆刪除
  8. Likey2013年10月11日 下午3:16

    這我就不清楚囉~

    請參考這篇
    http://tts.itri.org.tw/development/web_service_api.php

    你這個問題應該問工研院了XD
    http://tts.itri.org.tw/about_us/contact.php

    回覆刪除
  9. tts新手2013年10月18日 晚上11:59

    呼~抱歉 最近頗忙...沒有看到回覆

    謝謝大大的答覆

    稍為研究了一下js的內容,似乎多半都是網址連過去的的設定
    (其實我看不太懂XDDD),也稍微再次看了tts提供的function內容,可惜...

    想大大一下,一篇完整的文章,是否有辦法讓它(tts)念到某字(段)後就自動暫停呢??

    謝謝~

    回覆刪除
  10. Likey2013年10月19日 中午12:08

    如果是固定念到某字(段)後就暫停

    因為 tts 本來就能控制要轉語音的字串
    就是 ConvertInit 的第一個參數
    不一定要將整段文章都拿去轉成語音

    如下：
    tts.ConvertInit("從小我的夢想就是能喝到阿薩姆奶茶。","media","Bruce","100","0","0","0","5");



    如果要想再進一步控制
    就要多在 JavaScript 下點工夫了...

    回覆刪除
  11. tts新手2013年10月20日 晚上11:08

    嗯嗯 我有試過您的範例

    我只是比較好奇它應該有個結束的function??

    然後去觸發更改點擊 "暫停"或"繼續"的按鈕( || 或 三角形按鈕 , 應該懂我意思@@")

    還是謝謝大大~!!

    回覆刪除

Likey
創用 CC 授權條款