📢 #33 讓聲音具現化吧！Sound Visualizer：AudioContext + Web Audio API 即時顯示分貝值 + 音頻頻率
#33 真實名稱「石門國小互動觸屏-讓聲音具現化吧！Visualizer」是阿凱專為觸控螢幕設計的**聲音視覺化教具**。AudioContext 抓麥克風即時顯示分貝值 / 最大分貝值 / 音頻頻率 / 最大音頻頻率，純前端 6.9KB 單檔。
四年級自然「聲音」單元的痛
四年級自然有「聲音」單元 — 教大小聲 / 高低音 / 振動：
- ❌ 抽象概念：學生看不到「聲音」
- ❌ 課本插圖：靜態的波形圖不直觀
- ❌ YouTube 影片：被動觀看，不能跟自己的聲音對應
阿凱的 #33 讓聲音具現化吧！ 反向：麥克風即時抓聲音 + 動態顯示分貝值 + 頻率。
#33 真實怎麼做？
真實標題：「石門國小互動觸屏 - 讓聲音具現化吧！Visualizer」
核心數據顯示：
- 分貝值：0 dB（即時音量大小）
- 最大分貝值：0 dB（這次說話最大聲是多少）
- 音頻頻率：0 Hz（即時音高）
- 最大音頻頻率：0 Hz（這次最高音）
學生對著麥克風說話 → 數字即時跳動 → 「聲音」從抽象變具體。
真實技術棧
- 純前端單檔 HTML（6,883 字元 — 很小巧）
- Web Audio API
AudioContext - requestAnimationFrame 流暢更新數據
navigator.mediaDevices.getUserMedia取得麥克風權限- 無 LLM、無後端
- 部署：
smes.tyc.edu.tw/smes_html/sound.html
教學情境
四年級自然「聲音」單元 2 節課：
第 1 節：大小聲對應分貝
- 全班輪流上前說話 → 看分貝值
- 「輕聲說話 = 30-40 dB」「大聲呼叫 = 70-80 dB」「尖叫 = 90+ dB」
- 老師用這數字講「為什麼老師說話要 60 dB 不要 90 dB」
第 2 節：高低音對應頻率
- 學生唱高音 → 頻率上升
- 學生唱低音 → 頻率下降
- 「男生說話頻率 100-150 Hz」「女生 200-250 Hz」「狗哨 20000 Hz 人聽不到」
音樂課延伸：
- 唱 Do Re Mi → 看頻率對應
- 「Do = 261.6 Hz」「Re = 293.7 Hz」⋯
跟 #37 #38 聲音系列的關係
阿凱有 3 個聲音相關工具：
- #33 讓聲音具現化吧！（本篇）— 即時數據顯示
- #37 聲波擴散 360 小遊戲 — 360° 聲波可視化遊戲
- #38 聲音互動小遊戲！！ — 聲音控制的遊戲
3 個工具漸進式呈現「聲音」概念 — 從顯示 → 視覺化 → 遊戲化互動。
配對工具推薦
- #37 聲波擴散 360 小遊戲 — 進階版視覺化
- #38 聲音互動小遊戲 — 遊戲化版
- #32 觸屏碰碰碰 — 觸控互動系列
適用對象
- 四年級自然老師（聲音單元）
- 音樂老師（高低音教學）
- 帶大型觸控螢幕的學校
- 想做「抽象概念視覺化」的老師
想試試？
打開 → 允許麥克風 → 對著螢幕說話 → 看「聲音」變成數字。