mobile Safariから音声を投稿する仕組みを考えていたところ、MediaRecorder APIたるものを発見しました。
当初は、
- ボイスメモで録音（音声ファイルを生成）
- どうにかしてブラウザから音声ファイルにアクセス
- ファイルアップロード
という手順を考えていたのですが、音声ファイルへのアクセスで苦戦しており、
- ブラウザで録音（音声ファイルを生成）
- ファイルアップロード
でいけるのであれば、手軽だなと思い調査を進めたところ、MediaRecorder APIをラップしたコードを公開しているリポジトリを見つけました。
デモを試したところ、iOS14のiPhoneでも、Android10のPixelでも動作したので、作者に感謝しつつ利用させもらうことにしました。
ただ、デモがVue.jsで書かれていたので、そこだけReact.jsというかNext.jsに移植してみました。
ついでにデザインをiPhoneのボイスメモ風にしました。
