🔊 #37 聲波擴散 360 小遊戲：AudioContext 抓麥克風 + 360° 圓形擴散視覺化（XOOPS tadnews 嵌入）
#37 真實標題「桃園市石門國小校網 - 聲波擴散 360 小遊戲」— 用 AudioContext 抓麥克風聲音 + 360° 圓形視覺化擴散，學生對螢幕喊叫看聲波擴散圖案。嵌入 XOOPS tadnews 文章。
聲音 3 部曲（#33 → #37 → #38）
阿凱的聲音互動系列漸進式呈現：
| # | 工具 | 呈現方式 |
|---|---|---|
| #33 | 讓聲音具現化吧！ | 數字顯示（分貝 + 頻率） |
| #37 | 聲波擴散 360（本篇） | 360° 圓形擴散 |
| #38 | 聲音互動小遊戲！！ | 遊戲化互動 |
從「看到聲音數字」 → 「看到聲音形狀」 → 「用聲音玩遊戲」三層次。
#37 真實怎麼做？
真實標題：「聲波擴散 360 小遊戲」
核心互動：
- 抓麥克風聲音
- 螢幕中央有圓形視覺化區
- 聲音越大 → 圓圈擴散越大
- 高頻 / 低頻不同顏色
- 360° 圓形對稱擴散像水波紋
真實技術棧
- 嵌入 XOOPS tadnews 文章（66 KB 含 XOOPS 系統頁面）
- 實際工具邏輯內嵌
- Web Audio API AudioContext
navigator.mediaDevices.getUserMedia麥克風權限- Canvas 2D + requestAnimationFrame 流暢動畫
- 部署：
smes.tyc.edu.tw/modules/tadnews/page.php?ncsn=14&nsn=2863
教學情境
四年級自然「聲音」單元延伸：
- 上完 #33 數字版 → 換 #37 視覺化版
- 「聲音大小用圓形大小表示，頻率高低用顏色表示」
- 物理概念可視化
藝術與人文：
- 學生對螢幕唱歌、說話、喊叫
- 看自己的聲音變成藝術品
朝會宣導：
- 「請大家小聲說話」前 → 用 #37 讓大家看「大聲說話 = 大圓圈擾人」
- 比口頭規勸有效 10 倍
音樂課：
- 不同樂器吹奏 → 看視覺化形狀差異
- 直笛 / 木魚 / 鈴鼓有不同擴散圖案
配對工具推薦
- #33 讓聲音具現化吧！ — 數字版
- #38 聲音互動小遊戲 — 遊戲化版
- #32 觸屏碰碰碰 — 觸控互動系列
適用對象
- 四年級自然老師（聲音單元）
- 音樂老師（樂器音色教學）
- 想做「聲音擴散物理視覺化」的老師
- 帶大型觸控螢幕的學校
想試試？
打開 → 允許麥克風 → 對螢幕大叫「啊～」 → 看 360° 聲波擴散，很療癒。