投稿する
マガジン
著者：アソバース編集部公開：更新：約8分で読めます

ブラウザゲームの音声形式：MP3・OGG・WAVの選び方

遊びをつくる

執筆にClaudeを使用しています。

さまざまな小さなゲームの世界が並んだ棚を描いたイラスト。
記事のテーマをもとに制作したAI生成イメージ。実際のゲーム画面ではありません。

ブラウザゲームに音を付けようとしたとき、最初に迷うのが「どの形式で書き出すか」です。MP3・OGG・WAVの三つはどれもよく見かけますが、ファイルサイズ・音質・ブラウザごとの再生可否がそれぞれ異なります。「とりあえずMP3にした」という選択は多くの場面で正解に近いのですが、OGGのほうが適している状況や、WAVを使うべき理由が残っている場面もあります。 この記事では、三つの形式の仕組みの違いを整理したうえで、「BGM」「効果音」「ボイス」という用途別の選び方と、ブラウザ互換性を確保するための具体的な手順を示します。

この記事の目次
  1. 三つの形式がそれぞれ何をしているか
  2. 用途別の選び方
  3. ブラウザ互換性を確実に確保する方法
  4. ファイルサイズを小さく保つための工夫
  5. 判断基準をまとめると
  6. 次の行動
  7. 参考資料

三つの形式がそれぞれ何をしているか

MP3 は非可逆圧縮（データを間引いて小さくする）の代表格です。人間の耳が聞き取りにくい周波数帯の情報を削ることで、元の音データを大幅に縮小します。128kbpsで書き出した場合、同じ音源のWAVと比べてファイルサイズは10分の1以下になることも珍しくありません。特許は2017年に失効しており、現在は主要ブラウザのほぼすべてで再生できます。

OGG（Ogg Vorbis） もMP3と同じ非可逆圧縮ですが、完全にオープンソースで設計されています。同じビットレートでMP3より音質がわずかに有利とされることもありますが、体感できる差はゲーム用途では限定的です。Safariは長年OGGに対応していませんでしたが、macOS/iOS側でのサポート状況が変化してきているため、公式ドキュメントで最新の対応状況を確認するのが確実です。

WAV は非圧縮（または可逆圧縮）で音を保存する形式です。音質の劣化がなく、ループの継ぎ目でノイズが出にくいという特徴があります。反面、1分の音声が数十MBになることもあり、ゲームに複数のBGMを乗せると総ファイルサイズがすぐに膨らみます。すべての主要ブラウザで問題なく再生できます。

用途別の選び方

BGM（ループ再生する背景音楽）

BGMはゲームプレイ中に繰り返し流れるため、ファイルサイズがロード時間に直結します。ここでは圧縮形式を選ぶのが基本です。

MP3でのループ再生には一つ落とし穴があります。MP3のエンコーダーは先頭と末尾に無音フレームを付加することがあり、ループの継ぎ目に無音が混入してリズムがずれて聴こえる問題が知られています。これを避けるには次のどちらかをとります。

  1. OGGを使う：Ogg Vorbisはループ時の無音問題が起きにくく、Webゲームのゲームエンジン（Phaser、PixiJSなど）でもOGGのループを推奨している場合があります。SafariのOGG対応状況だけ別途確認してください。
  2. Web Audio APIの loopStart / loopEnd を使う：MP3のままでもJavaScriptで正確なループ点を指定すれば継ぎ目の無音を回避できます。ただしDaw（音楽制作ソフト）でループ点を計測する手間が必要です。

書き出しビットレートの目安はBGMなら128〜192kbpsが多くの場合で十分です。それ以上上げてもゲームBGMとしての体験差は小さく、ファイルサイズばかり増えます。

効果音（短い単発音）

効果音は1ファイルが数秒以内で済むため、圧縮によるファイルサイズの差は小さくなります。一方で、非可逆圧縮は「シュッ」「ポン」といった高域成分を含む音に圧縮ノイズを乗せやすく、低ビットレートだと安っぽく聴こえることがあります。

効果音に使うなら WAV か OGG（高めのビットレート） が安定しています。WAVは1ファイルが数百KB以内に収まることが多く、「圧縮して音が変わるリスク」を避けたい場面では素直に使えます。大量の効果音を読み込む場合だけ、圧縮の必要性を改めて検討してください。

ボイス・セリフ

音声の長さが数秒〜数十秒になるボイスは、WAVのまま配布するとファイルサイズが問題になります。MP3（128kbps前後）でも人の声の聞き取りやすさはほとんど損なわれないため、ボイスはMP3が第一選択になります。OGGも同様に使えます。

ブラウザ互換性を確実に確保する方法

現状のブラウザ対応を一言でまとめると「MP3はほぼ全滅なし、OGGはSafariに注意、WAVは全対応」です。ただしブラウザのアップデートで状況は変わるため、MDN Web Docs（後述）で <audio> の対応表を随時確認することを習慣にしてください。

互換性を確実に担保したいなら、複数形式を用意してフォールバックする手法が定番です。HTMLの <audio> タグでは次のように書きます。

html
<audio>
  <source src="bgm.ogg" type="audio/ogg">
  <source src="bgm.mp3" type="audio/mpeg">
</audio>

ブラウザは上から順に再生できる形式を探し、最初に対応しているものを使います。OGGを優先し、非対応のブラウザはMP3にフォールバックするという構成です。PhaserなどのゲームフレームワークもこのパターンをAPIで直接サポートしています。

Web Audio APIを直接使う場合も同じ発想で、AudioContext.decodeAudioData() の前に Audio.canPlayType() で対応形式を確認してから読み込むのが堅実な実装です。

ファイルサイズを小さく保つための工夫

フォーマット選択と同じくらい効果があるのが、書き出し前の音源の扱いです。

  • サンプリングレートを下げる：BGMや効果音なら44.1kHzが標準ですが、22.05kHzにするだけでファイルサイズをほぼ半減できます。効果音の高域が少し落ちますが、スピーカー環境に大きく依存するため試す価値があります。
  • モノラルで書き出す：効果音はステレオである必要がないことが多く、モノラルにするとサイズが半分になります。BGMでも「中央から鳴らすだけ」のゲームならモノラルで十分です。
  • 無音部分をトリミングする：書き出し時に頭と末尾の無音を削るだけでループのずれ対策にもなり、ファイルサイズも削減できます。

圧縮ツールとしてはAudacity（無料・オープンソース）やFFmpegが広く使われています。FFmpegはコマンドライン操作になりますが、「-ar 22050 -ac 1 -b:a 128k」のようなオプションで一括変換ができるため、素材が多い場合に便利です。

判断基準をまとめると

  • BGM（ループあり）、第一候補：OGG + MP3フォールバック、理由：ループ継ぎ目の問題を回避しやすい
  • 効果音（短い音）、第一候補：WAV または OGG高ビットレート、理由：圧縮ノイズを避けやすい
  • ボイス・長めの音声、第一候補：MP3、理由：サイズと音質のバランスが取りやすい

この表はあくまで出発点です。実際にゲームに読み込んでループや音質を確認し、問題があれば形式やビットレートを変えて再書き出しするのが現実的な進め方です。

次の行動

まずBGMをOGGとMP3の両形式で書き出し、<source> タグを使ったフォールバック再生を手元のHTML環境で試してみてください。ループの継ぎ目に無音が混入しないかを複数のブラウザで確認するのが最初の検証ステップです。音声素材が整ったら、HTMLやZIPとしてまとめてアソバースに投稿することができます。

参考資料

  • MDN Web Docs「HTMLの audio 要素」および「Web Audio API」
  • Audacity 公式ドキュメント
  • FFmpeg 公式ドキュメント
マガジン一覧に戻る