[App Inventor] APP有聲書，使用工研院文字轉語音服務

這是一個使用 App Inventor 搭配工研院的文字轉語音服務有聲電子書，為CAVEDU今年度的實習生歐新暘設計

功能說明: 電子書整合聲音、動畫、圖片的特性呈現了多媒體的便利性，已成為時代的潮流，尤其在兒童讀物市場上不可或缺，本教學示範如何以Canvas和Player元件來達成有聲書的功能。

程式碼下載請點我

元件說明:

素材名稱:

1.png、2.png、3.png、4.png

boy1.wav、boy2.wav、boy3.wav、boy4.wav

girl1.wav、girl2.wav、girl3.wav、girl4.wav

Taiwanese1.wav、Taiwanese2.wav、Taiwanese3.wav、Taiwanese4.wav

程式碼:

1.宣告變數

       宣告time，控制手指的動畫。

       宣告voice_type，儲存現在聲音種類。

       宣告page，儲存現在頁數。

       宣告text，儲存故事內文。
2.初始化頁面

Screen1.Initialize方塊 :

進到Screen1螢幕初始化時，便執行do區塊內的動作，

可運用在一些前置性的操作上。

 (1)call tellstory 是本範例建的副程式，之後會說明。

 (2)設定ImageSprite1的圖片為hitfinger.png這個檔案。

 (3)設定ImageSprite1的X座標。

 (4)設定ImageSprite1的Y座標。

【參考】ImageSprite圖片精靈  、 Canvas畫布、 副程式

Clock1.Timer方塊:

當計時器停止作動時呼叫本事件。

本範例設定TimerInterval為100(毫秒)，也就是0.1秒觸發一次Timer事件。

 (1)運用變數time來設定動畫，當此事件被呼叫一次，變數time值+1。

 (2)ImageSprite1.Heading 設定ImageSprite1的運動方向，

      向右為0°，向上為90°，向左為180°，向下為270°。

      ImageSprite1.Picture 設定ImageSprite1的圖片。

      ImageSprite1.Speed 設定ImageSprite1的運動速度。

 (3)當變數time = 26時，設定圖片為hitfinger.png，最後再設定變數time為0。

      會發現time變數值永遠處於0~26的狀態，運用這些狀態設置動畫。

【說明】finger.png:        hitfinger.png:

想一下為什麼finger.png的手指圖案是上下顛倒的呢?

提示這跟heading有關。

因為heading是直接旋轉物件，而不是翻轉，所以換一張垂直翻轉的圖方向剛好。

3.講故事功能

tellstory方塊:

tellstory 是本範例建的副程式，功用包含顯示頁數、故事內文，與設定聲音、圖片。

 (1)設定當頁面是第一頁時，才會顯示聲音按鈕與ImageSprite1(手指)。

 (2)顯示所在頁數，length of list 會抓取 list的清單數目，這邊沒把程式寫死。

 (3)根據頁數設定圖片影像。

      圖片素材名稱要照順序命名才能這樣寫。

 (4)根據頁數，在先前建的text清單抓取內文。

 (5)根據按鈕勾選狀態與所在頁數，設定Player播放的聲音檔。

4.翻頁功能

Canvas1.Flung方塊:

當使用者手指滑過畫布時執行此事件。

 (1)當使用者手指往右滑(xvel > 0)，代表往左翻頁，當page = 1時，無法往左翻頁。

    【註】xvel代表水平速度分量。

 (2)相反的就是往右翻頁，這邊用length of list沒把程式寫死，不用因不同頁數的故事

      而修改程式碼。

 (3)當使用者有碰觸畫布時，呼叫tellstory。

5.按鈕功能

Boysound.Changed方塊:

當Boysound按鈕的值變時，換句話說就是按鈕被按時就觸發此事件。

 (1)只有當Boysound按鈕是勾選的狀態，才執行下面的程式。

 (2)有三組按鈕 Boysound、Girlsound、Tsound，由於App inventor 2並沒有

    radio button的功能，所以要自己寫，這邊是讓當其中一個按鈕被按時，讓其他按

     鈕變成沒按的狀態，並控制Enabled的狀態，其他兩個按鈕也是照這個邏輯。

素材說明:

音檔部分使用工研院文字轉語音服務。

圖檔使用Pixabay CC0圖片。