多媒體&網路瀏覽器

使用者介面+介面布局  多媒體:(一)照相機、(二)圖片選擇器(三)音效元件、(四)音訊播放器 繪圖動畫 感測器&通訊連接  專題雲端應用
2016/01/12 謝碧景(c)編製更新 

 學習目標 MIT App Inventor 2繁體中文: Create apps! 

  • 學會Media多媒體類別中Camera(照相機)】結合【ImagePicker(圖像選擇器)】元件的設計與應用。
  • 學會Media多媒體類別中【Sound(音效)】及【Player(音樂播放器)】元件的設計與應用。
  • 學會Media多媒體類別中【TextToSpeech文字語音轉換器】及【SpeechRecognizer音辨識】元件的設計與應用。
  • 學會User Interface使用者介面類別中WebViewer(網路瀏覽器)】元件嵌入網頁的設計與應用。

一、多媒體元件

(一)照相機 Camera

  • Camera(照相機)元件位於左側元件面板(Palette)之『多媒體(Media)』類別中,為非視覺元件(即不會顯示在行動裝置上),程式中以按鈕啟動照相功能。
  • 無屬性僅方法與事件:

拍照 方法   啟動照相裝置
拍照完成 事件  當照相完成後會觸發此事件(圖像位址)。
  • 例:利用相片路徑取得相片,或從相簿取一張相片當作 Canvas畫布的背景圖。
*註:參閱內建指令說明:Media→Camera 照相機《摘自: AppInventor中文學習網指令中文化

(二)圖像選擇器 ImagePicker

  • ImagePicker(圖像選擇器)元件位於左側元件面板(Palette)之『多媒體(Media)』類別中,可讓使用者從行動裝置之『相簿』中選取一張相片
  • 方法與事件:

選擇完成 事件 當完成相片選取後,會觸發此事件。
準備選擇 事件  當選擇相片前,會觸發此事件。
打開選框 方法  啟動相簿,選取相片功能。 
 
  • 常用屬性
 屬性  說明 
 選中項  選取相片的完整路徑,只能在程式方塊中取得。
 圖像  顯示的圖示。 

  • 啟動ImagePicker(圖像選擇器)元件有兩種方式:
    • 直接點選ImagePicker(圖像選擇器)元件,系統會開啟行動裝置的相簿,讓使用者選取。
    • 透過程式方塊中以『打開選框』方法啟動ImagePicker(圖像選擇器)元件。該作用相同於使用者點選ImagePicker(圖像選擇器)元件。
  • 例:從相簿中選取相片當作 Canvas畫布的背景圖。

註:參閱內建指令說明:Media→ImagePicker (圖像選擇器)《摘自: AppInventor中文學習網指令中文化

homework 練習9:請運用『多媒體』類別中Camera(照相機)元件及ImagePicker(圖像選擇器)元件建立班級相簿集錦【重點:學會『Media(多媒體)類別中元件的設計與應用】(檔名:camera.aia)

1. 畫面編排(Designer)頁面:即版面配置頁面,如下圖。本範例的照相功能,需在行動裝置上執行,建議使用實機測試。

設定元件屬性:

2.程式設計(Blocks)頁面

  • 語系→繁體中文:

  • 語系→English:

homework 練習10:畫布塗鴉:請利用照相機元件拍照,或從相簿取一張相片當作畫布的背景圖,使用者可在畫布上塗鴉後存檔或清除。【重點:學會『Camera(照相機)ImagePicker(圖像選擇器)及Canvas畫布元件的設計與應用】(檔名:Canvas.aia)

1.畫面編排(Designer)頁面:即版面配置頁面,如下圖。本範例的照相功能,需在行動裝置上執行,建議使用實機測試。

https://sites.google.com/site/jingprogram/app/component/media/ai2_ex10_Canvas-1.png

2.程式設計(Blocks)頁面

  • 語系→繁體中文:
(1)設定畫筆顏色與粗細。

(2)啟動照相機,拍照後拍攝完成事件會以參數(圖像位址)設定相片為背景圖,或從相簿中選取相片為背景圖。


(3)在畫布上拖曳會觸發被拖曳事件,產生如同塗鴉效果。
*註:Canvas1.畫線會自 
(前點x座標,前點y座標)-(前x座標,當前y座標繪製一條直線。
  參數 (起
點x座標,起點y座標) 代表第一次觸碰的點。
  參數 (前點x座標,前點y座標代表上一次觸碰點。
  參數 (前x座標,當前y座標代表目前觸碰點。
  參數 任意被拖曳的精靈 會判斷是否觸碰到畫布中的動畫元件。

(4)分別按下按鈕『儲存、另存新檔、清除』。

*註:按鈕『儲存』及另存新檔』在LabelFileName元件位置顯示如下:因行動設備不同,儲存位置會有不同,且儲存的圖片無法以圖像選擇器立即讀取,但已儲存,可在相簿中檢視。

 ButtonSave:
 ButtonSaveAs:

  • 語系→English:


3.延伸思考
呈上題,請增加Slider滑桿元件以拖曳方式設定畫筆粗細(3-15),並可選擇不同畫筆顏色塗鴉。【重點:學會『Camera(照相機)ImagePicker(圖像選擇器)、Slider滑桿及Canvas畫布元件的設計與應用】(檔名:Canvas_ex10.aia)
例:

二、聲音類元件

App Inventor 2 有2個播放聲音的相關元件(音效元件、音訊播放器元件),及1個錄音元件,簡述如下:

(一)Sound音效元件

  • Sound(音效)元件位於左側元件面板(Palette)之『多媒體(Media)』類別中,為非可視元件,可播放較短的音效檔,亦可讓手機產生震動,及設定震動時間。
  • 屬性與方法:
 屬性:
屬性 說明 
來源文件 設定播放的聲音檔
最小間隔 在最小間隔內播放完音效,且不重複,即音效無法重複播放。
 方法
1.包含:從頭播放、暫停播放、繼續播放、及停止播放。
2.震動:動時間由參數傳入,時間單位為毫秒(1秒=1000毫秒)。
  例如:讓手機震動1秒。

 

*註:參閱內建指令說明:Media→Sound 音效元件 《摘自: AppInventor中文學習網指令中文化

homework 練習11簡易鋼琴:當按下琴鍵,分別彈奏Do、Re、Mi、Fa、So、La、Si 音效。【重點:學會Media(多媒體)類別中Sound(音效)元件的設計與應用】 琴鍵圖檔及7個音效檔(檔名:SoundPiano.aia)

1.畫面編排(Designer)頁面:即版面配置頁面,如下圖。



2.程式設計(Blocks)頁面

  • 語系→繁體中文:

  • 語系→English:

3.延伸思考1:電子琴  音效檔(Do、Re、Mi、Fa、So、La、Si、Do+,共8個音的電子琴)、key圖示【重點:學會『Media(多媒體)類別中Sound(音效)元件的設計與應用】(專案名稱:Piano_ex11-1.aia)


(二)Player音樂播放器元件 
1.Player(音樂播放器)元件位於左側元件面板(Palette)之『多媒體(Media)』類別中,為非可視元件,可播放較長的音樂檔,亦可讓手機產生震動。
2.常用屬性、方法及事件:

 屬性:
屬性 說明 
來源 設定播放的聲音檔,因伺服器有上傳容量限制,建議聲音檔儲存至SD卡,播放路徑為
 file:///mnt/sdcard/SD卡路徑
音量 設定播放之音量大小,由1~100,預設為50。
循環播放 設定是否循環播放。 
播放狀態 目前是否正在播放中。 
 方法與事件
方法與事件 說明 
暫停 方法 暫停播放聲音。
開始 方法 開始或繼續播放聲音。
停止 方法 停止播放聲音。 
震動 方法 設定手機產生震動,時間單位為毫秒(ms)。 
已完成 事件  當聲音檔播放結束,會觸發此事件。 

*註1:音樂播放器元件較音效元件少了從頭播放,若需音樂播放器元件從頭播放聲音檔,可先停止方法停止播放聲音,再用開始方法播放,如下。

*註2:例如 播放素材庫中Twinkle.mp3 聲音檔(請先上傳音樂檔),如下圖【播放音樂(ButtonPlay)】及【停止播放(ButtonStop)】按鈕。

*註3:例如 播放SD卡中 media 資料夾的 Twinkle.mp3 聲音檔,如下圖【播放音樂】按鈕。

※建議採實機執行,因行動設備不同,SD卡儲存位置會有不同。內建指令說明:Media→Player 播放器 《摘自: AppInventor中文學習網指令中文化

(三)嵌入網頁:WebViewer網路瀏覽器元件
  • :該元件在使用者介面(User Interface)類別中,功能為顯示指定的網頁內容,會嵌入一個小瀏覽器,除網頁顯示外,亦顯示文字、圖片、Gif動畫、Google地圖等。
1.常用屬性:程式方塊:土黃色代表事件紫色是方法深綠色是設定屬性值淺綠色是取得屬性值
屬性   說明
當前頁標題  網頁標題,僅能以程式方塊設定。
當前網址  目前超連結的網址。
允許連線跳轉   是否可使用前進、後退的瀏覽器導航歷史紀錄。
首頁地址   首頁的網址。
*註:僅需在首頁地址屬性填入網址,即可在該元件區嵌入指定的網頁。

2.常用方法

 方法  說明 
回首頁   載入首頁
開啟網址   載入目前連結的網址。

      • 例:請以Player 音樂播放器元件及WebViewer網路瀏覽器元件,以【播放音樂、停止播放、瀏覽音樂網】三個按鈕設計閱聽音樂,如下。

音樂來源: Twinkle Lullaby(Twinkle Little Star)
  播放音樂網:
  或 開啟網址 方法。

*註: 媒體轉檔或下載:線上將 YouTube 影片錄音、下載為 MP3 或 MP4 等格式。

 延伸思考2:音樂點播站,請展示音樂曲目,以利點播、暫停、停止。【重點:學會 ListPicker清單選擇器、Button按鈕、Player音樂播放器等元件的設計與應用】。(檔案:Player_ex11_2.aia)


    三、語音辨識相關元件
    • 語音元件屬多媒體類別元件,若要將使用者所說的語音轉文字可用 SpeechRecognizer語音辨識 元件,而要將文字轉語音說出可用 TextToSpeech文字語音轉換器 元件。
    (一)TextToSpeech文字語音轉換器元件
    • 屬性、方法及事件:
     屬性  說明 
     可用國家、語言  只能在程式中使用,取得目前可用的國家、語言。
     國家、語言  設定讀出語音的國家口音、語言。 
     音調  設定讀出語音的音調,值為0到2之間。
     語言速度  設定讀出語音的速度,值為0到2之間。
     結果  只能在程式中使用,傳回 真(True) 或 假(false) 轉換是否成功。
     方法  
     唸出文字(訊息)  啟動文字轉換語音,參數『訊息』是要轉換的文字內容。
     事件  
     準備唸出  文字轉換語音前觸發此事件。
     唸出結束(返回結果)  文字轉換語音完成後觸發的事件,參數『返回結果』傳回轉換是否成功。
    • 支援的語言及國家,如下:
     語言 語言
    屬性值
     國家屬性值
     例:美國口音『USA』、英國口音『GBR』
     英語  en AUS、BEL、BWA、BLZ、CAN、GBR、HKG、IRL、IND、JAM、MHL、MLT、NAM、NZL、PHL、PAK、SGP、TTO、USA、VIR、ZAF、ZWE
     華語  zh TWN、CHN 
     法語  fr  BEL、CAN、CHE、FRA、LUX 
     德語  de  AUT、BEL、CHE、DEU、LIE、LUX 
     西班牙語  es ESP、USA 
     義大利語  it CHE、ITA 
     荷蘭語  nl BEL、NLD 
     波蘭語  pl  POL 
     捷克語  cs  CZE 
    • 範例參閱: 專題1_英文單字集。【重點:學會資料庫結合『TextToSpeech文字語音轉換器』、『File檔案管理』及『Web網路』元件的設計與應用】。(檔名:vocabulary.aia)

    (二)SpeechRecognizer語音辨識元件

     例:開啟語音輸入視窗,說一句話後,顯示辨識文字。(檔名:SpeechRecognizer.aia)

     1.畫面編排(Designer)頁面:即版面配置。

    2.程式設計(Blocks)頁面:
    • 語系→繁體中文:

    • 語系→English:


    3.實機執行畫面:

    (1)請按下『語音輸入』按鈕。
     (2)請說一句話。
     (3)顯示辨識後文字。