「聲波擴散 360 小遊戲」是阿凱老師聲音 3 部曲的第 2 部(#33 數字顯示 → #37 360° 圓形擴散 → #38 用聲音玩遊戲)— 抓麥克風聲音 + 360° 圓形對稱擴散像水波紋,學生對螢幕喊叫看自己的聲音變成藝術品。嵌在石門國小 XOOPS tadnews 文章內(smes.tyc.edu.tw/modules/tadnews/page.php?ncsn=14&nsn=2863)。
🎯 核心特色
- 〰️ 360° 圓形對稱擴散 — 螢幕中央有圓形視覺化區,聲音越大圓圈擴散越大像水波紋
- 🌈 高頻 / 低頻不同顏色 — 物理概念可視化,視覺一目了然
- 🎤 Web Audio API + Canvas 2D —
navigator.mediaDevices.getUserMedia取麥克風 + AudioContext 即時分析 + requestAnimationFrame 流暢動畫 - 🏫 嵌進 XOOPS tadnews 學校文章 — 66KB 含 XOOPS 系統頁面,掛
smes.tyc.edu.tw信任度滿分 - 💰 完全免費 + 純瀏覽器 — 不用裝軟體,平板觸控螢幕都能跑
💡 設計理念
阿凱的聲音互動系列漸進式呈現「聲音」概念:#33 看到聲音「數字」 → #37 看到聲音「形狀」 → #38 用聲音「玩遊戲」。「大聲說話 = 大圓圈擾人」比口頭規勸有效 10 倍 — 朝會宣導小聲說話前先用 #37 讓大家看,物理概念跟生活規範同時建立。直笛 / 木魚 / 鈴鼓不同樂器吹奏 → 看視覺化形狀差異,音樂課延伸超好用。
🎒 適合情境
四年級自然「聲音」單元延伸(上完 #33 數字版 → 換 #37 視覺化版)、音樂老師樂器音色教學、藝術與人文「學生對螢幕唱歌說話喊叫看自己的聲音變成藝術品」、想做「聲音擴散物理視覺化」的老師、帶大型觸控螢幕的學校。完全免費、免登入、純瀏覽器,打開 → 允許麥克風 → 對螢幕大叫「啊~」 → 看 360° 聲波擴散,很療癒。