【スマホ録音エラー解決】Whisper AI診断成功までの試行錯誤｜Flaskアプリ制作体験記

スマホで録音した音声ファイルが壊れる──。
今回は、FlaskとOpenAI Whisper APIを使ったAI発音診断アプリ開発中に直面したトラブルと、そこからの解決までの道のりを、リアルにお伝えします！
「うまくいかない」と悩んでいるあなたに、きっと参考になるはずです🌸

❗ スマホ録音時に発生した問題

パソコン（PC）から録音した音声ファイルは、問題なくサーバーに送信され、Whisper APIで診断ができていました。
ところがスマホでテストすると、エラーが発生──。

Invalid file format. Supported formats: [‘flac’, ‘m4a’, ‘mp3’, ‘mp4’, ‘mpeg’, ‘mpga’, ‘oga’, ‘ogg’, ‘wav’, ‘webm’]

拡張子はwebmなのに、Whisper API側で「無効なファイル」として拒否される問題が発生したのです。

🔥 問題解決までの試行錯誤

すぐに調査と修正に取りかかりました。

• MediaRecorderにaudio/webmを指定して録音 → ダメ
• さらにaudio/webm;codecs=opusに明示指定 → ダメ
• サーバー側でpydubを使ってwebm→wav変換 → 読み込みエラー
• 録音データ自体をJSで変換しようと試みる → 難易度が高すぎて断念

調査の結果、原因はスマホのブラウザが作るwebmファイルが規格に合っていなかったことと判明しました。

🎯 導き出した解決方法

最終的にたどり着いた解決策は、サーバー側でffmpegを使って、壊れたwebmファイルを強制的にwav形式へ変換する方法でした。

実際に実装した流れはこうです：

1. フォームで送られた音声ファイル（壊れたwebm）を保存
2. サーバーでffmpegコマンドを実行し、wav形式に変換
3. 変換後のwavファイルをWhisper APIに送信
4. 正常に発音診断が完了！🎉

この方法なら、PCでもスマホでも問題なく録音＆診断できるようになりました！

📚 今回の経験から学んだこと

• ファイル拡張子だけで安心してはいけない（中身チェック重要）
• ブラウザごとのMediaRecorder動作差に注意が必要
• サーバー側で柔軟に対応できる仕組み（ffmpegなど）を持っておくと強い
• トラブルもすべて成長の糧になる！

🎓 これから学びたい人におすすめ

🌱 最後に｜失敗を恐れず、成長を楽しもう！

今回の失敗と試行錯誤は、最終的にサイトの完成度を大きく引き上げました。
どんなに遠回りに見えても、挑戦し続けた先には必ず「できた！」という達成感が待っています。🚀