1月22日の記事で、「次回はFirebase Storageを使って音声配信を実装する」と予告した。 しかし、その前言を撤回する。

エンジニアリングの世界では、より良い解が見つかれば、躊躇なく方針転換すべきだ（というのは建前で、単に財布の紐が固いだけである）。

今回は、GoogleのNotebookLMで作成した音声ファイル（.m4a）を、**「維持費ゼロ・転送料ゼロ」**でブログに埋め込むまでの技術ログを残す。

なぜFirebaseをやめたのか？

当初の計画では、Googleのエコシステムで統一するためにFirebase Storageを使うつもりだった。しかし、料金体系を再確認して冷や汗が出た。

• Firebase (Google Cloud): 保存容量は安いが、「データ転送（Egress）」に従量課金が発生する。
• リスク: もし記事がバズって、数千人が音声（約25MB）を再生したら？ 老生の年金がクラウド破産で消えてしまう。

そこで白羽の矢を立てたのが、Cloudflare R2だ。

Cloudflare R2 とは

ブログのホスティング（Pages）でもお世話になっているCloudflareが提供するオブジェクトストレージ（AWS S3互換）だ。 最大の特徴は、**「エグレス料金（外への転送量）が完全無料」**であること。

つまり、何度再生されても、どれだけダウンロードされても、請求額は変わらない。個人開発者の強い味方だ。

実装手順

1. バケットの作成

Cloudflareのダッシュボードから「R2」を開き、「バケットを作成」をクリック。名前は適当に（例: korouto-assets）付けた。

2. ファイルのアップロード

NotebookLMからダウンロードした音声ファイルを、ブラウザ画面にドラッグ＆ドロップするだけ。FTPソフトすら不要だ。

3. 公開設定（パブリックアクセス）

ここが唯一のハマりポイントかもしれない。 デフォルトでは非公開になっているので、「設定 (Settings)」タブから「R2.dev サブドメイン」を「許可 (Allow)」にする。 これで、https://pub-xxxxx.r2.dev/filename.m4a という公開URLが発行される。

ブログへの埋め込み

特別なJavaScriptライブラリは不要だ。HTML標準の <audio> タグを使えば、PCでもスマホでもネイティブなプレーヤーが起動する。

Astro（Markdown）での書き方は以下の通り。

<div style="background-color: #f3f4f6; padding: 20px; border-radius: 8px;">
  <h3 style="margin-top: 0;">🎙️ AI音声解説</h3>
  <audio controls style="width: 100%;">
    <source
      src="[https://pub-xxxxxxxx.r2.dev/あなたのファイル名.m4a](https://pub-xxxxxxxx.r2.dev/あなたのファイル名.m4a)"
      type="audio/mp4"
    />
  </audio>
</div>

（執筆協力：Gemini / 編集・監修：古老）