HTML5でsrc属性に生バイナリデータを使う方法｜Data URIスキームの活用

音声ファイルをデータベースに保存している場合、アプリケーション側ではそのファイルをBLOB（バイナリラージオブジェクト）として扱うことになります。たとえば、セッションスコープからログインユーザーの音楽データを取得するようなケースでは、${sessionScope.user.music} のように式言語（EL）を使って、セッションごとに対応するバイナリデータを受け取ります。

Data URIスキームとは

こうして取得したバイナリデータをHTML上で直接利用するには、「Data URIスキーム」が便利です。これは data: で始まるURI形式で、MIMEタイプとBase64エンコードされたデータ本体をsrc属性にそのまま埋め込める仕組みです。外部ファイルへのリクエストが不要になるため、小規模なデータのインライン表示に適しています。

画像をimgタグで表示する場合

画像データも同じ考え方で扱えます。imgタグのsrc属性に「data:image/～;base64」形式で指定するだけで、バイナリデータを直接描画できます。

<img src="data:image/gif;base64,ソースデータ" width="30" height="25" alt="My Image">

この例ではGIF形式の画像を想定していますが、JPEGなら「image/jpeg」、PNGなら「image/png」のように、実際のフォーマットに合わせてMIMEタイプを変更してください。

音声をaudioタグで再生する場合

音声ファイルについても同様に、audioタグのsrc属性に「data:audio/mp3;base64」形式のData URIを指定します。

<audio controls>
  <source src="data:audio/mp3;base64,ソースデータ" type="audio/mp3">
</audio>

MP3以外にも、WAV形式なら「audio/wav」、OGG形式なら「audio/ogg」など、ファイル形式に応じたMIMEタイプを指定することで対応できます。

利用時の注意点

Data URIは便利な反面、Base64エンコードによって元のデータサイズが約1.3倍に膨らむ点には注意が必要です。大きな音声ファイルをインライン化するとHTML自体が肥大化し、ページの初期表示が遅くなる可能性があります。そのため、アイコン画像や短い効果音など比較的小さなデータに使うのが一般的です。サイズの大きいメディアファイルは、従来どおりサーバー上のURLを参照する方式の方が効率的です。