本單元進度說明:
我們在這單元將加入背景音樂與特殊音效。

請注意:所謂背景音樂是指不論在任何頁面瀏覽,音樂都是一直持續播放的。

 

01.在App加入背景音樂要注意別觸犯著作權法,這時我們可以從YouTube取得免費的背景音樂。請先『登入』YouTube,點選網頁頁面右上角的帳號,按一下『創作者工作室』。

01

 

02.點選頁面左方的『創作者工具箱』→『音效庫』,即可看到『免費音樂』與『音效』。

02

 

03.由於音樂檔很多,您可以點選『類型』來進行篩選。

03

 

04.也可以篩選『樂器』種類。

04

 

05.找到音樂後,點選左方的『播放』圖示來試聽,點選音樂檔案最右方的『下載』圖示可以下載此檔案。

05

 

06.點選『頁面』索引標籤→『背景音樂』→『添加背景音樂』。

 

07.找到要加入的『音樂mp3檔案』→『開啟』即可。

 

08.當然也可以僅僅在某單獨頁面播放音樂,而不要持續播放的背景音樂。點選『插入』索引標籤→『音頻』→『本地音頻』。

 

09.找到要加入的『音樂mp3檔案』→『開啟舊檔』。

 

10.將『音樂圖示』移動到適合的位置。

08

 

09.我們可以開啟模擬器確認位置是否合適。(特別注意:如果已經設定了背景音樂,頁面中就不適合再加入音頻檔案,這會互相干擾。)

09

 

10.如果希望頁面出現時就自動播放背景音樂,那麼請將右方『基本設置』欄位→『功能設置』中的『瀏覽開始時播放音訊』勾選起來。此外,使用者可以點選『音樂圖示』來關閉背景音樂,如果不希望使用者關閉背景音樂,那麼『瀏覽開始時隱藏』也勾選起來。

10

 

11.接下來要增加動畫音效。我打算幫操作說明頁面的手指動畫加入音效,因此切換到操作說明頁面,點選『加入』索引標籤→『音頻』→『本地音頻』,找到『音效mp3檔案』→『開啟舊檔』。

11

 

12.由於音效僅在特殊條件下啟動,為避免被使用者誤觸,因此將『音樂圖示』拖曳到頁面之外。

12

 

13.我們希望當手指擺動時有音效產生,首先點選『手指圖案』→『交互』索引標籤→『動畫開始時』。

13

 

14.因為只有一個動畫,直接按『確定』。

14

 

15.『對象』請選擇音效檔案。

15

 

16.音效檔案要進行『動作』當然就是選擇『播放』,再按『添加』。

16

 

17.在右方『屬性欄』窗格中即可看到這個音效啟動的交互行為。最後記得開啟模擬器測試背景音樂與音效的效果喔。

17

Comments are closed.