「讓聲音具現化吧！Sound Visualizer」是阿凱老師為四年級自然「聲音」單元 + 大型觸控螢幕設計的視覺化教具 — 抓麥克風即時顯示分貝值 / 最大分貝值 / 音頻頻率 / 最大音頻頻率，把抽象的聲音變成具體數字。掛在石門國小 XOOPS 校網 VM smes.tyc.edu.tw/smes_html/sound.html 上，是阿凱聲音 3 部曲第 1 部（#33 數字 → #37 360° 圓形擴散 → #38 用聲音玩遊戲）。
🎯 核心特色
- 🎤 麥克風即時偵測 —
navigator.mediaDevices.getUserMedia拿麥克風權限，requestAnimationFrame 流暢更新 - 📊 4 大數值即時顯示 — 分貝值 / 最大分貝值（這次說話最大聲）/ 音頻頻率 / 最大音頻頻率（這次最高音）
- 🔊 Web Audio API AudioContext — 純瀏覽器跑 AnalyserNode 即時頻率分析，無後端無 LLM
- 🏫 掛學校網域 — 純前端單檔 HTML 6,883 字元很小巧，掛
smes.tyc.edu.tw信任度滿分 - 💰 完全免費 + 不用安裝 — 比 Stellarium / NASA Eyes 等專業軟體親民 100 倍
💡 設計理念
四年級自然「聲音」單元教大小聲 / 高低音 / 振動，最痛是「學生看不到聲音」 — 課本插圖是靜態波形圖不直觀、YouTube 影片被動觀看不能跟自己的聲音對應。阿凱反向設計：麥克風即時抓 + 動態顯示數字，「聲音」從抽象變具體。「輕聲說話 = 30-40 dB / 大聲呼叫 = 70-80 dB / 尖叫 = 90+ dB」、「男生說話頻率 100-150 Hz / 女生 200-250 Hz / 狗哨 20000 Hz 人聽不到」 — 抽象概念瞬間具體化。
🎒 適合情境
四年級自然「聲音」單元 2 節課（大小聲對應分貝 → 高低音對應頻率）、音樂課唱 Do Re Mi 看頻率對應（Do = 261.6 Hz / Re = 293.7 Hz）、帶大型觸控螢幕（55-65 吋）的學校朝會宣導「請大家小聲說話」前先讓大家看「大聲 = 大數字擾人」、想做「抽象概念視覺化」的老師。完全免費、免登入、純瀏覽器，打開 → 允許麥克風 → 對著螢幕說話 → 看「聲音」變成數字。