ブラウザで録音した音声をBlobにしてサーバにアップロードする＆サーバからダウンロードしたBlobをBlob URLにしてaudioタグで再生するために、Blob ⇄ Blob URLの変換方法を調べる 🎤

先日つくったブラウザで音声を録音できるサイトですが、折角なら録音データをFirebaseにアップロードしたいと思いました。

Next.js + RecorderService.js でブラウザで音声を録音する 🎙 - みかづきブログ・カスタム

そのために、Blob URL → Blob と Blob → Blob URL の変換方法を調べました。

Blob URL → Blob

本来この操作はいらないのですが、今回拝借しているライブラリが、Blobを隠蔽し、Blob URLを返しているので、再変換する必要がありました。

github.com

ライブラリ側に手を入れることも考えたのですが、良い機会なので調べてみた感じです。

一言で言えば、responseTypeをBlobにしてBlob URLに対してGETのリクエストを投げればOKです。

axios.get(blobUrl, {
  'responseType': 'blob'
}).then(({ data }) => {
  console.log(data); // → Blob
}).catch((err) => {
  console.error(err);
});

これでBlobをゲットできたので、Firebase Storageにアップすれば良いと思います。

Blob → Blob URL

逆にブラウザでBlobからBlob URLをつくるには、URL.createObjectURLを使えばOKです。

developer.mozilla.org

const blobUrl = URL.createObjectURL(blob);

簡単ですね。

これらを組み合わせれば、ブラウザで録音したデータをFirebase Storageにアップすることなどお茶の子さいさいです。