音間トレーニング

音当てピッチマスター — 発表用まとめ 期間: 2026/9/5〜9/25(約3週間)、PR 13件、マージ中心に開発

1. 使用言語・技術スタック メイン3本柱 + 周辺の構成です:

役割 言語 技術・ファイル フロント(見た目・進行) TypeScript + React 19 Vite 6, Tailwind CSS 4, .tsx 24 + .ts 14。src/App.tsxが進行役、components/が画面部品、utils/が問題・採点・音 音声解析(歌→音名) Python FastAPI + torch / torchaudio + numpy + uvicorn。voice_api/main.py(窓口)、pitch.py(音高検出)。5ファイル LAN対戦サーバー JavaScript (Node.js) Express + ポーリング方式。server.lan.js。後にオンライン化で削除 その他 HTML/CSS, AudioWorklet用JS recordingProcessor.js、Web Audio APIで波形合成(録音音源なし) 品質・公開 - tsx --test、tsc --noEmit、vite build、Python unittest + smoke_voice_api.py、Vercel / Docker / Nginx 保存: 学習履歴・ランキングはlocalStorage(ブラウザ内)。LAN部屋情報はサーバーメモリのみ。

2. 頑張ったこと(履歴順) プロトタイプ→製品化(9/5): Google AI Studio生成物を移植してスタート 日本語化・操作性: Chrome自動翻訳の文字化け防止で英語→日本語化。ホームボタン、問題数・重複なし等の出題設定、総問題数10問化 学習継続の仕掛け: 採点結果の自動保存+履歴グラフ、間違えやすい音階の分析、間違えた問題の反復練習機能 4つの新機能(9/9): カウントダウン、試奏キーボード、BGMループ、五線譜での回答レビュー(聴き比べ・ライブ五線譜) LAN対戦・協力モード: 部屋コード入室、対戦(BattleMode)、メロディー交代制の協力(CoopMode) 最大の山場・音声回答モード(9/10〜22): マイクで歌った音をtorchaudioで判定。約1.8秒録音→WAV変換→FastAPI→周波数→MIDI→C4〜C5に正規化→採点。発声音程を五線譜で比較表示 オンライン化(9/23): LANを廃止し、共有ランキング・募集掲示板・チャットに置換(Vercel/Docker対応) ドキュメント・テスト: BEGINNER_GUIDE.md 376行(図解入り初心者案内)、READMEに環境手順・録音仕様・Nginx設定まで記載。TS/Python両方のテスト整備。アイコンを音符に変更、テーマ色の簡素化
3. 苦労したこと 文字化け・コンフリクト: コミットログ自体に�E等の化けが残るほどエンコーディングに苦戦。change-themecolorと他ブランチのコンフリクト解消、stashのWIP/index二重コミット発生 OS差の環境構築: Intel Macはtorch 2.2.2 + NumPy 1.26、それ以外は2.8.0 + 2.2.6と分岐。Pythonは3.11/12限定(3.13はwheelなし)。voice-api:win/macスクリプトと両OS対応で吸収。マイクはlocalhost/HTTPS必須 音響処理の調整: 再生音の回り込み→録音前に再生停止・録音中抑止。録音枠3秒/推奨発声2秒、無音・小声・遅延発声・倍音・残響対策にイヤホン推奨。声域差を許すオクターブ正規化、信頼度は「安定性の目安」と割り切る仕様化 構成変更の痛み: 開発用server.proxyが本番静的配信に効かない→同一オリジン/api/pitch転送(Nginx設定)を文書化。LANメモリ保存・ポーリングからオンラインDB方式への大規模置換(1600行削除) 発表一言案:「React・Python・Nodeの3言語分業で、聴く→歌う→競うを一つのアプリにし、一番苦労したOS差と音響エラーを仕様とテストで潰しました」