搜尋

音樂播放器 ( 播放、暫停、停止、上下首、循環播放 )

這個範例會使用 Scratch 實作一個「音樂播放器」,音樂播放器的功能包含:播放、暫停、停止、上一首、下一首、循環播放、單首循環和顯示播放進度等功能。

快速導覽:

繪製角色造型

使用繪畫方式建立第一個角色「play」,負責控制音樂的播放、暫停和繼續播放,替角色繪製三組造型,造型名稱分別是 stop ( 黑色三角 )、play ( 綠色三角 ) 和 pause ( 兩條紅色直線 )。

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 繪製角色造型

使用繪畫方式建立第二個角色「stop」,負責將音樂停止,造型使用一個黑色正方形。

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 繪製角色造型

使用繪畫方式建立第三個角色「next」,負責播放下一首,造型使用一個兩個較薄的「向右」黑色三角形。

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 繪製角色造型

使用繪畫方式建立第四個角色「pre」,負責播放上一首,造型使用一個兩個較薄的「向左」黑色三角形。

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 繪製角色造型

使用繪畫方式建立第五個角色「repeat」,負責控制音樂的不循環、單首循環和全部循環,替角色繪製三組造型,造型名稱分別是 no ( 灰色停止循環標誌 )、one ( 黑色循環一次標誌 ) 和 all ( 黑色循環標誌 )。

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 繪製角色造型

使用繪畫方式建立第六個角色「line」,負責進度條的底色,造型繪製一個 382x15 的灰色長條形,對齊畫布中心。

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 繪製角色造型

使用繪畫方式建立第七個角色「line_color」,負責進度條的進度顏色,造型繪製一個 14x14 的橘色圓形,對齊畫布中心。

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 繪製角色造型

建立音樂角色並上傳音樂

使用繪畫方式建立第八個角色「music」,建立角色後,切換到「音效」頁籤,上傳自己要播放的音樂。

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 建立音樂角色並上傳音樂

接著切換到「造型」頁籤,上傳幾首音樂就建立幾個造型,造型的順序必須對應音樂的順序,並使用「音樂長度」作為造型名稱

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 建立音樂角色並上傳音樂

在舞台上排列角色

八個角色都繪製完成後,按照下圖,在舞台上排列這八個角色。

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 在舞台上排列角色

程式原理 ( music )

編輯「music」角色的程式,從左側積木選單裡,建立一個名為「音樂時間清單」的函式,並勾選「執行完畢再更新畫面」,再來將會透過這個函式,「自動」快速紀錄目前的歌曲數量

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 「音樂時間清單」的函式

點擊綠旗時,新增一個變數 music_num 為 1,表示目前要播放的音樂為第一首,並根據 music_num 更換造型,同時使用函式紀錄所有造型名稱,紀錄完成後,清單的長度就是音樂的數量

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 紀錄完成後,清單的長度就是音樂的數量

函式執行後,發送 stop 廣播訊號,並在接收到 stop 廣播訊號時,設定變數 state 為 stop ( 從左側積木裡新增一個變數 state ),且停止所有音效。

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 函式執行後,發送 stop 廣播訊號

編輯收到廣播訊息 pause 和 play 的程式,使用「降低播放速度和靜音」模擬音樂暫停,並透過 state 的內容判斷音樂是否從頭開始播放

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 使用「降低播放速度和靜音」模擬音樂暫停

新增一個名為「切換」的函式,「不用勾選」執行完畢再更新畫面。

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 新增一個名為「切換」的函式,

使用接收廣播 next 和 pre 的做法,實作上一首和下一首的程式,不論是收到哪種訊號,都會先透過 music_num 變數取得播放的音樂項目號碼,接著根據號碼播放音樂。

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 新增一個名為「切換」的函式,

程式原理 ( play )

編輯「play」角色的程式,內容大多是點擊角色後,改變造型並發送對應的廣播訊息,主要邏輯規則如下:

造型 目前狀態 點擊後的行為
stop 造型 ( 黑色三角 ) 停止狀態 廣播 play 後呈現 pause 造型 ( 紅色雙槓 )。
play 造型 ( 綠色三角 ) 暫停狀態 廣播 play 後並呈現 pause 造型 ( 紅色雙槓 )。
pause 造型 ( 紅色雙槓 ) 播放狀態 發送 pause 開始播放,並呈現 play 造型 ( 色三角 )。

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 程式原理 ( play )

程式原理 ( stop )

編輯「stop」角色的程式,點擊角色後廣播 stop。

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 程式原理 ( stop )

程式原理 ( next )

編輯「next」角色的程式,點擊角色後廣播 next。

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 程式原理 ( next )

程式原理 ( pre )

編輯「pre」角色的程式,點擊角色後廣播 pre。

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 程式原理 ( pre )

程式原理 ( repeat )

編輯「repeat」角色的程式,點擊綠旗時,預設使用 all 造型標示「全部循環」,並新增一個 repeat 變數,變數值為目前的造型名稱 ( all ),點擊角色後切換造型,再將 repeat 設定為目前的造型名稱。

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 程式原理 ( repeat )

程式原理 ( line )

編輯「line」角色的程式,點擊綠旗時進行定位和移到最下層 ( 避免蓋住進度顏色 ),接著加入畫筆積木,在收到 stop 廣播時,進行「蓋章」的動作並隱藏角色,就能在每次停止時,重置進度條「底色」。

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 程式原理 ( line )

程式原理 ( line_color )

編輯「line_color」角色的程式,首先是收到 stop 廣播時,將進度點移動到進度條最前方,圖層移動到最上層,並設定畫筆的顏色和粗細與造型相同

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 程式原理 ( line )

當收到 play 廣播時,使用 step 變數表示「每一秒移動的距離」,計算方式為「灰色進度底色的長度,除以目前的音樂長度」,利用清單 music_time 搭配目前第幾首音樂的 music_num 就能讀取音樂長度,讀取每一秒移動的距離後,讓 line_color 每隔 0.5 秒移動半步 ( step/2 ),搭配畫筆的「下筆」,就能製作出音樂播放的進度條。

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 程式原理 ( line )

當進度條完成後,根據目前 repeat 變數的內容,決定接下來要繼續播放下一首、停止播放還是重複播放這一首。

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 程式原理 ( line )

完成效果

程式完成後,點擊綠旗,就可以透過音樂播放器的按鈕,控制音樂播放、暫停、停止、上一首、下一首、循環播放、單首循環和顯示播放進度。

Scratch 教學 - 音樂播放器 ( 播放、暫停、停止、上下首、循環播放 ) - 完成效果

範例解答

範例解答:https://scratch.mit.edu/projects/946213298/

小結

雖然這個音樂播放器可以做到基本的控制,但美中不足的是不能「真正暫停」音樂,也不能讓音樂跳轉到指定的位置,不過整篇範例使用了不少有趣的技巧,例如造型名稱、廣播溝通、畫筆...等,是相當有意思的範例喔!

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

Scratch 教學

基本介紹

關於 Scratch 使用 Scratch 3 註冊與登入 操作介面 我的東西

圖形與聲音

繪製造型&背景 編輯音效

程式積木

積木種類 動作 外觀 音效 事件 控制 偵測 運算 變數 清單 函式積木

擴充功能

音樂 畫筆 視訊偵測 文字轉語音 翻譯

技巧&觀念

全域變數、區域變數 深入理解區域變數 控制指定分身 控制所有分身的方法 雲端變數 雲端變數記錄文字 變數串接文字 判斷英文字母大小寫 中斷與停止程式 廣播訊息並等待 鍵盤與滑鼠 滑鼠點擊與長按 偵測所有鍵盤按鍵 點擊隱藏的角色 突破角色尺寸限制 角色與舞台邊界 重複積木的等待時間 音樂暫停與繼續播放 使用造型名稱建立清單 使用造型代替變數 文字轉清單 清單合併為文字 判斷兩個清單是否相同 複製清單、反轉清單 清單數字排序 清單最大值最小值

入門範例

鍵盤控制貓咪 指向中間的箭頭 水果音樂鋼琴 貓咪的影分身之術 貓咪的細胞分裂 螃蟹跑來跑去 吃水果 摸蝴蝶 小狗追棒球 魚兒水中游 小鳥往前飛 舞棍阿伯 小時鐘 搖骰子 轉動的眼球 抽獎輪盤 大樂透電腦選號 卡牌抽籤 ( 20 中 1 ) 移動到邊緣切換場景 人物依序跳舞 ( 廣播 ) 按鈕控制貓咪 ( 廣播 )

進階範例

貓咪跑步 ( 連續背景 ) 貓咪跑步 ( 超長背景 ) 大型數字 ( 圖形數字 ) 拖拉怪獸碰撞牆壁 鍵盤鋼琴 ( 記錄音符 ) 中文字逐字稿 英文字逐字稿 計算機 1 ( 顯示數字 ) 計算機 2 ( 加減乘除 ) 雲端聊天室 音樂播放器 推貓咪 ( 視訊偵測 ) 圍捕小魚 ( 視訊偵測 ) 戳泡泡 ( 視訊偵測 )

視覺特效範例

視差效果 水中吐泡泡 雪花隨風飄 鍵盤鋼琴 ( 音符動畫 ) 無限循環畫中畫 水底探照燈 狙擊望遠鏡 ( 兩倍變焦 ) 貓咪萬花筒 仙女棒 ( 光跡效果 ) 駭客任務背景特效 放煙火 1 ( 往上發射 ) 放煙火 2 ( 爆炸效果 )

繪圖範例

鏡射畫圖 ( 對稱圖形 ) 小畫家 ( 舞台上畫圖 ) 記錄畫圖軌跡 繪製圓形 繪製橢圓形 繪製立方體 ( 會動 ) 繪製正多邊形 繪製正多角星形 ( 單純 ) 繪製正多角星形 ( 多線 ) 繪製拋物線 繪製折線圖 繪製圓餅圖 繪製圓餅圖 ( 指示線 ) 蜘蛛結網 ( 八邊形網 ) 繪製舞台方格 繪製正弦波形 ( sin ) 正弦波毛毛蟲動畫 顯示聲波圖形

物理&模擬範例

鐘擺運動 簡單磁鐵效果 兩個磁鐵的磁力線 立體空間 ( 三度空間 ) 循跡移動 拋物線發射炮彈 地球繞著太陽轉 彈跳的籃球 電風扇 ( 控制強度 ) 拉不走的彈力球 慣性移動 ( 滑鼠 ) 慣性移動 ( 鍵盤 )

入門遊戲範例

猴子接香蕉 打地鼠 打地鼠 ( 體感視訊偵測 ) 刮刮樂 吹風機吹頭髮 太空狗閃躲隕石 九九乘法測驗 英文單字測驗 釣魚遊戲 拍西瓜 ( 儲存最高分 ) 寶可夢猜猜我是誰 ( 基本 ) 形狀配對拼圖 台灣地圖拼圖 英文打字機 英文打字機 ( 判斷大小寫 ) 射擊外星人 猜數字 ( 猜大小 ) 猜數字 ( 幾 A 幾 B ) 連連看 ( 產生器 ) 連連看

進階遊戲範例

青蛙過河 青蛙過馬路 反彈球 ( 乒乓球 ) 打磚塊 狙擊氣球 ( 兩倍變焦 ) Flappy Bird Flappy Bird ( 聲控版 ) 走迷宮 ( 基本 ) 大型迷宮 ( 鍵盤控制 ) 大型迷宮 ( 滑鼠控制 ) 翻卡記憶遊戲 翻卡記憶遊戲 ( 改良版 ) 井字棋 ( 圈圈叉叉 ) 九宮格拼圖 九宮格拼圖 ( 改良版 ) 音階記憶 貪吃蛇 ( 分身版 ) 貪吃蛇 ( 畫筆版 ) 小雞下樓梯 拉霸機

團康遊戲範例

搖骰子 ( 1~3 個 ) 比手畫腳 ( 猜動物 ) 音樂傳球遊戲 大聲公 ( 比賽誰的氣長 ) 抽籤 ( 可調整中籤數量 ) 轉盤指針 ( 指到誰就當鬼 ) 倒數計時器 ( 基本版 ) 倒數計時器 ( 大數字版 )

遊戲設計技巧

角色 ( 地上移動 ) 角色 ( 蹲下、左右轉 ) 角色 ( 跳耀、兩段跳 ) 角色 ( 牆壁、爬牆 ) 地圖 ( 清單轉換 ) 地圖 ( 二維陣列 ) 地圖 ( 控制移動 ) 地圖 ( 牆壁碰撞偵測 ) 地圖 ( 吃東西偵測 ) 俄羅斯方塊 ( 角色與背景 ) 俄羅斯方塊 ( 移動與碰撞 ) 俄羅斯方塊 ( 放置方塊 ) 俄羅斯方塊 ( 消除完成方塊 ) 俄羅斯方塊 ( 下個形狀 )