App inventor教學:建立資料庫,音樂播放器下一首按鈕

App inventor設計較為完整功能的手機應用程式時,免不了要建立資料庫,本文以音樂播放器為例,介紹如何設置音樂曲目清單,新增播放目前音樂及下一首按鈕。

本章的主題是音樂播放器,在先前兩個小節都是介紹如何佈局操作介面,這一節開始進入核心主題:於App Inventor執行音樂播放。在設計過程中,馬上發現在介面中有個上一首和下一首的按鈕,要實現其功能,這個會涉及到App資料的編號及排序,因此在這一小節將介紹到在程式設計中、關於資料處理很最重要的一個概念,於App Inventor便是內件方塊之一:清單。

一、音樂播放器元件

於「元件面板」中,拖曳「多媒體」裡的「音樂播放器」到「工作面板」。參考關於這個元件的說明,可以播放音訊、控制手機震動,可用來源屬性定義音訊來源,另外還有兩點輔充,一個是支持格式、另一個是解釋音樂與音效之間的差別。

App inventor教學:建立資料庫,音樂播放器下一首按鈕 1

二、播放音樂按鈕

於程式設計中,設定當按钮被點選時,執行音樂播放器來源音訊及開始播放,如此即實現音樂播放的最基本功能,建議讀者在此時參考第一章第五節「手機模擬測試」,透過Al Companion或USB連線,在自己手機按一下中間三角形按鈕,正常真的會發出一聲貓叫。

App inventor教學:建立資料庫,音樂播放器下一首按鈕 3

三、建立音樂清單

雖然上一步驟成功讓按鈕發出聲音,但通常是有好多首歌曲,當我們按右邊的下一首圖標、左邊的上一首圖標,程式就會依指定順序播放。要達到這樣功能,首先要有個音樂資料庫,在裡面有編好號碼順序的歌曲資源,如此才有可能實現上一首下一首的效果。這個在App Inventor便是「內件方塊」裡的「清單」,添加執行一個「建立清單」方塊,其說明為「建立一個可包含任意項數的清單」,如截圖所示,在此預計要以搭配變數,建立一個名為「音樂」的歌曲清單。

App inventor教學:建立資料庫,音樂播放器下一首按鈕 5

四、增加多數清單項

上個步驟的「建立清單」方塊有兩個凹槽,實務上真的要建立一個資料庫,例如照片、聯絡人、照片、音樂、筆記等,可想見個數都會是超過兩個甚至是一長串,從方塊表面上看不出來如何設置第三個以上的項目,其實只要點選截圖中齒輪形狀的圖標,便會跳出一個輔助浮窗,將游標移到「清單項」方塊,提示「增加一個清單項」,此時按住滑鼠左鍵將其拖曳到視窗右邊的「清單」方塊,如此可看到不但視窗內的「清單項」增加一個到了三項,在和變數嵌和的「建立清單」也變成了三個缺口。

App inventor教學:建立資料庫,音樂播放器下一首按鈕 7
App inventor教學:建立資料庫,音樂播放器下一首按鈕 9

五、文字清單變數

在上個步驟的基礎上,終於要開始在App Inventor建立資料庫,如截圖所示,於「初始化全域變數音樂庫」為「建立清單」:「zanzancat1.mp3」、「zanzandog2.mp3」、「zanzandeer3.mp3」,所以這裡合併應用到「變數」、「清單」、「文字」三種內件方塊。注意到這裡的「zanzancat1.mp3」等是直接於文字方塊中輸入多媒體檔案名稱,只要在「畫面編排」的「素材」裡上傳這些檔案,在「程式設計」的清單就會自動會讀取相關資料。

App inventor教學:建立資料庫,音樂播放器下一首按鈕 11

六、播放下一首程式

建立好了有順序的清單資料庫之後,終於可以實現本節一開始所謂的播放下一首按鈕功能。具體設置如下所示:除了資料庫外,再建立一個「音樂曲目」變數,利用「內件方塊」中的「數學」將此變數值預設為「1」。如果「按鈕3」(下一首)被點選,則音樂曲目為N+1,接著再設定「音樂播放器1」「來源」為清單中的索引項目,第一次按的時候,便是1+1=2,亦即播第一首的下一首:第二首。

「當按鈕2.被點選」,則是正常播放目前曲目,由程式架構可知,尚未點選按鈕3前,按钮2是播放第一首,點選按鈕3之後,播放第二首,依此順序執行。

App inventor教學:建立資料庫,音樂播放器下一首按鈕 13

七、程式執行偵錯

實際於手機模擬測試,按了兩次下一首,可以正常播放第三首音樂:「zanzandeer3.mp3」,但如果再按一次下一首,會跳出如下的錯誤訊息:「Attempt to get item number 4 of a list of length 3」,意思是清單裡僅有三項,因此可想而言,當N+1=3+1=4時,App Inventor沒辦法得到第四個項目資料,只能跳錯誤提示訊息。關於這個錯誤的解決設計,預計於下一節繼續介紹。

App inventor教學:建立資料庫,音樂播放器下一首按鈕 15
App inventor教學:建立資料庫,音樂播放器下一首按鈕 17

App inventor建立資料庫

即使是平常普遍使用的音樂播放App中,很簡單理所當然的播放下一首的按鈕功能,想在程式設計上實現,必須先將兩項以上的音樂檔案建立資料庫清單,每項資料有相對應的內容、編號或者代號,如此方能以類似N=N+1的數學等差數列控制目前所選取的項目,依照順序一一執行播放。

本書到本小節為止都是簡單處理兩三項少量的資料,不過在這一節開始引進資料庫處理的概念,所以已經準備好將資料量App inventor所處理的資料量擴充了,預計往後章節會以這一節的概念作為基礎,繼續延伸這方面程式設計的能力。

更多學習:App Inventor 2文章合集