未分類
音声ファイル変換パイプライン
概要
このプロジェクトではWAVファイルをGitHubにプッシュし、ビルド時に自動でOpusに変換してCloudflareにデプロイする。
[開発PC] [GitHub Actions] [Cloudflare]
│ │ │
│ .wav をpush │ │
├──────────────────►│ │
│ │ FFmpegで変換 │
│ │ .wav → .opus │
│ │ │
│ │ .opus をデプロイ │
│ ├───────────────────────►│
│ │ │
あなたがやること
1. WAVファイルを保存
WAVファイルを以下のディレクトリに保存する。
apps/web/public/audio/
└── boki3/
└── chapter4_0/
├── boki3_ch4_0_00.wav ← ここにWAVを置く
├── boki3_ch4_0_01.wav
└── ...
2. Vueコンポーネントでは .webm を指定
重要: コード内では .webm 拡張子を使う（変換後のファイル名）
// animation-demo-2.vue
audioUrl: '/audio/boki3/chapter4_0/boki3_ch4_0_00.webm' // ← .webm
なぜ
.opusではなく.webm？.opusファイル（生のOpusストリーム）はdurationメタデータが欠けやすく、ブラウザで再生時間が取得できない問題があります。.webmコンテナ（Opus音声入り）なら正しくdurationが保持されます。
3. GitHubにプッシュ
git add .
git commit -m "Add audio files"
git push origin master
これだけでOK。あとは自動で処理される。
自動で起こること（GitHub Actions）
- FFmpegをインストール（Ubuntu環境）
- Nuxtビルド実行（
pnpm build） - ビルドフックが
.wav→.webm（Opus音声）に変換 - 元のWAVを削除（デプロイサイズ削減）
- Cloudflareにデプロイ（
.webmファイルのみ）
なぜWAVをGitHubにプッシュするのか？
| 方法 | メリット | デメリット |
|---|---|---|
| WAVをpush（採用） | 編集しやすい、履歴管理できる | リポジトリサイズが大きくなる |
| Opusに変換してからpush | リポジトリが軽い | 毎回手動変換が必要 |
| 外部ストレージ（S3等） | リポジトリが軽い | 設定が複雑、コスト発生 |
結論: 音声ファイルが少量ならWAVをpushするのがシンプルで管理しやすい。
ファイルサイズ削減効果
| 形式 | 1分あたり | 品質 |
|---|---|---|
| WAV | ~10MB | 完全（非圧縮） |
| Opus 96kbps | ~0.7MB | 高品質（音声に最適） |
約90%のサイズ削減になる。
関連ファイル
変換処理（nuxt.config.ts）
// apps/web/nuxt.config.ts の hooks セクション
'nitro:build:public-assets': async (nitro) => {
// ... WAV→Opus変換処理
}
GitHub Actions（deploy.yml）
# .github/workflows/deploy.yml
- name: Install FFmpeg
run: sudo apt-get update && sudo apt-get install -y ffmpeg
トラブルシューティング
音声が再生されない
- コードで
.webmを指定しているか確認 - ビルドログで変換成功を確認
- ブラウザの開発者ツールでネットワークエラーを確認
ローカル開発時
ローカルでは .wav ファイルがそのまま public/ にあるため、開発サーバー（pnpm dev）では .wav が配信される。
フォールバック機能により、コードで.webmを指定していても、自動的に.wavにフォールバックするので、開発時もそのまま動作する。
ビルド後のプレビュー（本番と同じ.webmで確認したい場合）:
# PowerShellの場合（セミコロンで区切る）
pnpm build; npx wrangler pages dev dist
# または別々に実行
pnpm build
npx wrangler pages dev dist
※ && はPowerShellでは使えません
まとめ
- WAVファイルを
public/audio/に保存 - コードでは
.webmを指定 - git push するだけ
- 自動で変換＆デプロイされる