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

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

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

程式碼下載請點我

元件說明:

元件說明元件

元件類別 名稱 用途
Label title     顯示頁數
Label     content 顯示故事內文
Canvas Canvas1 顯示圖片
ImageSprite ImageSprite1 用來做動畫,提示使用者翻頁以閱讀
CheckBox    Boysound 換成男聲音檔
CheckBox Girlsound 換成女聲音檔
CheckBox Tsound 換成台語音檔
Player Player1 播放聲音檔
Clock Clock1 計時功能

 

素材名稱:

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.宣告變數

程式碼1

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

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

       宣告page,儲存現在頁數。

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

2

Screen1.Initialize方塊 :

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

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

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

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

 (3)設定ImageSprite1的X座標。

 (4)設定ImageSprite1的Y座標。

 

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

3

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:finger        hitfinger.png:hitfinger

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

提示這跟heading有關。

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

8

3.講故事功能

4_N

tellstory方塊:

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

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

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

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

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

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

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

 

4.翻頁功能

6

Canvas1.Flung方塊:

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

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

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

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

      而修改程式碼。

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

 

5.按鈕功能

7

Boysound.Changed方塊:

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

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

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

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

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

 

素材說明:

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

圖檔使用Pixabay CC0圖片。

2 thoughts on “[App Inventor] APP有聲書,使用工研院文字轉語音服務

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *