小鋼琴有7個按鍵，分別發出 do re mi fa so la si do 聲音。
素材:
可自製或網路搜尋，我是用相機拍鋼琴的琴鍵，使用PhotoImpact 切割成7個按鍵圖。用手機錄製鋼琴的聲音，使用 Audacity分割成7個聲音。
素材下載。
步驟:
開始使用 App Inventor
在 Google Chome ，網址輸入 http://ai2.appinventor.mit.edu/, 以 Google帳號登入。
在 Projects , 選 「Start new project」。專案名稱輸入 : piano。
Screen1 元件屬性設定如下:
- title: 小鋼琴
- ScreenOrientation :Landscape (讓手機螢幕變成橫的)
ScreenOrientation : 螢幕方向，包含了未指定Unspecified、垂直Portrait、橫放Landscape、感測器Sensor與使用者自定User等選項。
上傳7張圖片檔: do-s.jpg re-s.jpg mi-s.jpg fa-s.jpg so-s.jpg la-s.jpg si.jpg。
上傳7個聲音檔 :do.mp3 re.mp3 mi.mp3 fa.mp3 so.mp3 la.mp3 si.mp3 。
- AlignHorizontal:Center
- Width: Fill parent
- Height:Automatic
- Width: 40 pixels
- Height:240 pixels
- Text:無
- Image:do-s.jpg
其它6個Button 仿照上述的方法設定，但image要改。(可選 Button1 ，按 Ctrl+ C (複製)，再按 Ctrl +V (貼上) ，複製出另外1個 Button ，再去改 Image）
Button2 : re-s.jpg，Button3 : mi-s.jpg，Button4 : fa-s.jpg，Button5 : so-s.jpg，Button6 : la-s.jpg，Button7 : si-s.jpg。
選 Media/Sound 此元件，拖曳 Sound元件到 元件設計區, ，自動會掉到下面的Non-visible components區，更改名稱 為 Sound_do。
仿照上述方法，產生 Sound_re、Sound_mi、Sound_fa、Sound_so、Sound_la、Sound_si 元件。
把 Button1 改名為 Button_so，…，Button7 改名為 Button_si。這樣比較清楚每個按鈕的功能。
Designer最後的畫面如下:
Blocks 模式
按螢幕 右上方的 Blocks， 切換到 Blocks 模式。
按 Screen1，選 「when Screen1.Initialize do」block。
按 Sound_do元件，選 「set Sound_do.Source to 」block。
按 Built-in 內的 Text，選 「text string」block，輸入 "do.mp3"，插入到 「set Sound_do.Source to 」block的後面 。
其它6個 Sound依此類推。
也可直接 按 「set Sound_do.Source to 」block，按右鍵，選 Duplicate，複製。
結果如下:
按 Sound_do，選 「call Sound_do.Play」 block和 「call Sound_do.Vibrate」(按鍵加上震動效果) 。
按 Built-in 內的 Math，選 「number 」block，輸入300，插入到 millisecs的後面。縮短琴鍵聲音點擊的間隔時間，300ms =0.3秒。
利用Duplicate 和按下拉式方塊選其它 Sound元件的方式，可快速建立其它 按鈕的click程式。
Block最後的畫面如下:
執行時，要先按 Ctrl+ F12，變成橫的。畫面如下:
手機執行結果:
