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所處理的資料量擴充了,預計往後章節會以這一節的概念作為基礎,繼續延伸這方面程式設計的能力。

每天學習,每天充電:AppInventor文章合集

App inventor教學:建立資料庫,音樂播放器下一首按鈕 19
《人人都學得會的App Inventor 2初學入門》
Ask ChatGPT
Set ChatGPT API key
Find your Secret API key in your ChatGPT User settings and paste it here to connect ChatGPT with your Tutor LMS website.