🎙️ 麥克風波形測試器

flowchart TD
    USER["使用者點擊\n▶ 啟動麥克風"] --> PERM["navigator.mediaDevices\n.getUserMedia({ audio: true })\nTry-Catch 授權處理"]
    PERM -->|"授權成功\nMediaStream"| CTX["new AudioContext()\n建立音訊處理上下文"]
    PERM -->|"授權拒絕 /\n無麥克風裝置"| ERR["❌ 狀態列顯示錯誤\n#mic-status"]
    CTX --> SRC["createMediaStreamSource(stream)\n將麥克風串流接入 AudioContext"]
    SRC --> ANA["createAnalyser()\nfftSize = 2048\nfrequencyBinCount = 1024\n→ Uint8Array(1024)"]
    ANA --> RAF["requestAnimationFrame 渲染迴圈\n每幀呼叫 analyser.getByteTimeDomainData()"]
    RAF --> CANVAS["<canvas#mic-canvas>\n線條：#00ff00 螢光綠\n背景：#1a1a1a 深黑\n網格線：rgba(0,255,0,.08)"]
    CANVAS -->|"每 16ms\n(~60fps)"| RAF
    STOP["使用者點擊\n■ 停止測試"] --> CLOSE["cancelAnimationFrame()\nAudioContext.close()\nstream.getTracks().stop()\n狀態 → 已停止"]