スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

HTML5 Audio オブジェクトを JavaScript で制御する方法

HTML5 の Audio オブジェクトについて調べたことをまとめる。
なお、本エントリでは Audioタグについては記述しない。
<注意>以下で示すソースコードは、Firefox3.6 と GoogleChrome7 でしか検証していません。

目次
1. HTMLAudioElement オブジェクトの作成
2. HTML5 Audio およびコーデックのサポートチェック
3. 再生する Audio ファイルの指定
4. Audio ファイルの再生、一時停止、停止
5. Audio ファイルの音量変更
6. サンプルプログラム

1. HTMLAudioElement オブジェクトの作成
参考ページ: audio 要素 - HTML5 タグリファレンス - HTML5.JP
JavaScriptで制御するために、Audio要素のオブジェクトを作成する必用がある。
作成方法は以下の2通り
  // 再生するファイルのアドレスを指定せずにオブジェクト作成
  audio = new Audio("");  // 引数に空文字列を指定
  // 再生するファイルのアドレス(URL)を指定してオブジェクト作成
  audio = new Audio("./sound/temp.mp3");
引数なしで new Audio() とすると、Operaでエラーになるそうなので注意。

2. HTML5 Audio およびコーデックのサポートチェック
参考ページ: ブラウザーのネイティブなオーディオ - html5doctor - HTML5.JP
各ブラウザのコーデックサポート状況を見るとわかるように、ブラウザによって出力可能なコーデックが異なる。
また、Internet Explorer8以下のようにそもそもHTML5 Audioをサポートしていないブラウザもある。
サポートチェック方法は以下のとおり
try {
  audio = new Audio("");
  if(audio.canPlayType){
    var canPlayOgg = ("" != audio.canPlayType("audio/ogg"));
    var canPlayMp3 = ("" != audio.canPlayType("audio/mpeg"));
    if(canPlayOgg){
      // oggをサポートしている
      audio.src = "./sound/test.ogg";
    }else if(canPlayMp3){
      // mp3をサポートしている
      audio.src = "./sound/test.mp3";
    }else{
      throw "oggもmp3もサポートしていません";
    }
  }else{
    throw "canPlayTypeメソッドが存在しません";
  }
} catch (e) {
  // HTML5 Audioをサポートしていなければ例外が発生
  audio = null;
}
canPlayType(type)メソッドは、引数 type に MIME タイプを指定すると "", "maybe", "probably" のいずれかを返す。
""はそのタイプを再生できないことを示す。

上記ソースコードでは「new Audio("") で例外が発生するかどうか」で HTML5 Audio が使用可能かを判断しているが、
例外を発生させずにチェックするには
var audioTagSupport = !!(document.createElement('audio').canPlayType);
とすれば、audioTagSupport の true/false でAudioが使用可能/不可能を判定できる。
(Audio要素をサポートしていなければ document.createElement('audio').canPlayType が undefined になるため。
JavaScript では !(undefined) は true に変換される)
なお、上記ソースコードで if(audio.canPlayType) としているが、引数を指定しない audio.canPlayType の値は、true/false ではなく function オブジェクトか undefined。

3. 再生する Audio ファイルの指定
以下の2つの指定方法がある
・1章で示したように、 Audio オブジェクト作成時に指定する
・2章で示したソースコードのように、オブジェクト作成後に src属性へセットする
どちらの方法でも、ファイルのアドレスを妥当な URL で指定すること。
src属性の仕様に以下の記述がある。
メディア要素の src 属性がセットされたり変更されたら、ユーザーエージェントは、そのメディア要素のメディア要素ロード・アルゴリズムを呼び出さなければいけません。
つまり、ファイルのアドレスがsrcにセットされた時点で、ファイルのダウンロードが行われる。

4. Audio ファイルの再生、一時停止、停止
再生、停止に関するメソッドには play()pause()がある。
pause()メソッドは停止ではなく一時停止であり、pause()後にplay()すると一時停止箇所から再生される。
停止や先頭から再生するケースを含んだソースコード例を以下に示す。
var audio = null;  // Audio オブジェクト

/* 初期処理 */
// Audioやoggのサポートチェックは略
init = function(){
  // Audioオブジェクト作成
  audio = new Audio("");
  // load()直後に再生しないようにautoplayをfalseに設定
  audio.autoplay = false;
  // Audioファイルのアドレス指定
  audio.src = "./sound/test.ogg";
};

/* 再生(一時停止中は一時停止箇所から再生) */
play = function(){
  audio.play();
};

/* 先頭から再生 */
playfromstart = function(){
  audio.load();  // ロード・アルゴリズムを実行して初期状態に戻す
  audio.play();
};
  
/* 一時停止 */
pause = function(){  
  audio.pause();
};  

/* 停止 */
stop = function(){  
  // ended属性で終了判定する
  if(!audio.ended){
    audio.pause();
    audio.currentTime = 0;  // 再生位置を0秒にする
  }
};
停止処理においてended属性で終了判定している理由は以下のとおり。
再生中に currentTime = 0 を実行すると、play() しなくても最初からの再生処理が実行される。
pause() 後に currentTime = 0 実行すると再生処理は行われないはずだが、Firefox3.6では再生終了後のpause()は無視されて、最初からの再生処理が実行されてしまうため、終了判定をしている。
play()の仕様は「再生が終了していたら、最初から再生しなおす」なので、再生終了の場合は再生位置の移動は不要。

また、先頭から再生する処理において
  audio.currentTime = 0;
  audio.play();
としても良さそうだが、Firefox3.6では一度も play() していない状態で currentTime = 0 を実行するとエラーになる。
また、GoogleChrome7 では currentTime = 0 直後に play() すると、pause()した位置前後の音が混ざることがある。(少なくとも自分の環境では)

なお、ループ再生する場合は
  audio.loop = true;
  audio.play();
とすればよいのだが、Firefox 3.6 では loop 属性は未実装。詳細はこちらを参照。

5. Audio ファイルの音量変更
volume属性に 0.0 ~ 1.0 の範囲の数値を設定することで音量を変更できる。0.0 は最小音量で、1.0 は最大音量。
Firefox3.6とGoogleChrome7でテストした限りでは、volume = 0.0 だと何も聞こえない。
muted属性に true/false をセットすることにより、ミュート/ミュート解除を行う。muted属性はvolume属性より優先される。

詳細はリファレンスの4.8.9.10 ユーザー・インタフェースを参照。

6. サンプルプログラム
5章までの内容を用いて、音の再生、停止、音量の変更を行うサンプルプログラムを作った。
<サンプルプログラムの説明>
「音を出す」ボタンを押すとBGMが再生され、再度押すとBGMが止まる。
BGMが再生されているときに「ジャンプ」ボタンを押すと、ジャンプの効果音が再生される。
音量はラジオボタンで変更できる。
loop属性をサポートしていないブラウザでも、少々間隔をおいてBGMがループ再生する。
jQueryはVer1.4.2を使用。
ソースコードは以下のリンクを参照。
soundtest.html  soundtest.js

以上。
HTML5 Audio についてもっと知りたい方は メディア要素 - HTML5 タグリファレンス - HTML5.JP を参照して下さい。
スポンサーサイト

コメント

コメントの投稿

非公開コメント

プロフィール

himax64

Author: 南西
30代後半の無職です。
就活もせずダラダラ生きてます。
作ったもの

最新記事
人気記事
検索フォーム
カテゴリ
月別アーカイブ
最新コメント
最新トラックバック
RSSリンクの表示
QRコード
QRコード
カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。