WEBブラウザが対応している音声ファイル形式を、JavaScriptで識別する


The Web Game Developer’s Cookbook: Using JavaScript and HTML5 to Develop Games (Game Design) / Evan Burchard

HTML5 Audioでの音声ファイル再生は非常に簡単で、僅か、以下の2行のコードだけで音を鳴らすことが可能です。

[javascript firstline=”1″ highlight=”” title=”main.js”]
var audio = new Audio( "./sound/chime.ogg" );
audio.play();
[/javascript]

Audioの引数に「音声ファイルのパス」を渡すだけで再生が可能なのです。本当に便利な世の中になりました。

HTML5 Audioの登場によって、クロスブラウザ対応によるゲーム開発なども盛んになってきました。しかし、現状では、ブラウザ毎に対応している音声ファイル形式が異なるという問題があります。

上記のような実装では、「Ogg」に対応しているブラウザでしか再生することができないのです。例えば、IEは、「Ogg」に対応していない為、上記の実装ではIEでは音が鳴りません。

では「Ogg」ではなく、主要ブラウザで対応されている「MP3」を用いればいいんじゃないか、となるかもしれませんが、「MP3」はライセンスの制約があるので、ここは避けたいところです。

ゲームに「MP3」を使うのちょっと待った! ライセンスの問題とは?
http://www.materialize.jp/art/software-services/6892/

じゃあ、どうするか。

ブラウザで対応されている音声ファイル形式を「MIMEタイプ」によって識別してから、再生可能である音声ファイルを指定するようにすればいいでしょう。

JavaScript

まずはコードをご覧ください。以下で実現できています。

[javascript firstline=”1″ highlight=”3,4,5,6,7,8,9,10,11,15″ title=”main.js”]
// サポートされている音声ファイル形式を取得.
var AUDIO_EXT = ( function() {
var audio = new Audio();
var support = audio.canPlayType( "audio/ogg" );
if ( ("probably" == support) || ("maybe" == support) ) {
return ".ogg";
}
support = audio.canPlayType( "audio/mp4" );
if ( ("probably" == support) || ("maybe" == support) ) {
return ".m4a";
}
return "";
} )();

var SND_CHIME = "./sound/chime" + AUDIO_EXT;

var audio = new Audio( SND_CHIME );
audio.play();
[/javascript]

「MP3」の替わりに、ライセンス実施料の掛からない「Ogg」と「AAC」を使っています。

「MP3」を「Ogg」に変換する
http://www.materialize.jp/art/software-services/6910/

「MP3」を「AAC(.m4a)」に変換する
http://www.materialize.jp/art/html5/6936/

MIMEタイプの識別

Audio.canPlayType()に音声ファイルのMIMEタイプを渡すと、ブラウザの対応状況により戻り値として以下が取得できます。

・””(空文字)
・”maybe”
・”probably”

4.8.10.3 MIME タイプ
http://www.html5.jp/tag/elements/media_elements.html#mime-types

それぞれの意味は以下の通りです。

“”(空文字) : サポートしていない
“maybe”    : サポートしているか確信が持てない
“probably”  : サポートしている

基本的には「””(空文字)」以外が取得できれば、再生可能であると判断して問題ないでしょう。

それにしても「”maybe”」は何とも頼りないです。確信が持てないって・・・・・・しかし実際、IE、Firefox、Google Chrome、Android 標準ブラウザでは、「”maybe”」が取得できます。

AACのMIMEタイプ

上記の実装例では、「AAC」の「MIMEタイプ」を「”audio/mp4″」としていますが、「AAC」の「MIMEタイプ」は不統一なので、環境によっては異なる場合があります、注意が必要です。

「AAC(.m4a)」の「MIMEタイプ」は不統一
http://www.materialize.jp/art/html5/7015/

(平成26年7月11日 アシベズヘア@ashibehair_mfacebooknoteSUZURI

WEBブラウザが対応している音声ファイル形式を、JavaScriptで識別する」への1件のフィードバック

  1. ピンバック: 「AAC(.m4a)」の「MIMEタイプ」は不統一 | materialize.jp

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です