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通り
2. HTML5 Audio およびコーデックのサポートチェック
参考ページ： ブラウザーのネイティブなオーディオ - html5doctor - HTML5.JP
各ブラウザのコーデックサポート状況を見るとわかるように、ブラウザによって出力可能なコーデックが異なる。
また、Internet Explorer8以下のようにそもそもHTML5 Audioをサポートしていないブラウザもある。
サポートチェック方法は以下のとおり
""はそのタイプを再生できないことを示す。
上記ソースコードでは「new Audio("") で例外が発生するかどうか」で HTML5 Audio が使用可能かを判断しているが、
例外を発生させずにチェックするには
(Audio要素をサポートしていなければ document.createElement('audio').canPlayType が undefined になるため。
JavaScript では !(undefined) は true に変換される)
なお、上記ソースコードで if(audio.canPlayType) としているが、引数を指定しない audio.canPlayType の値は、true/false ではなく function オブジェクトか undefined。
3. 再生する Audio ファイルの指定
以下の２つの指定方法がある
・1章で示したように、 Audio オブジェクト作成時に指定する
・2章で示したソースコードのように、オブジェクト作成後に src属性へセットする
どちらの方法でも、ファイルのアドレスを妥当な URL で指定すること。
src属性の仕様に以下の記述がある。
4. Audio ファイルの再生、一時停止、停止
再生、停止に関するメソッドには play() と pause()がある。
pause()メソッドは停止ではなく一時停止であり、pause()後にplay()すると一時停止箇所から再生される。
停止や先頭から再生するケースを含んだソースコード例を以下に示す。
再生中に currentTime = 0 を実行すると、play() しなくても最初からの再生処理が実行される。
pause() 後に currentTime = 0 実行すると再生処理は行われないはずだが、Firefox3.6では再生終了後のpause()は無視されて、最初からの再生処理が実行されてしまうため、終了判定をしている。
play()の仕様は「再生が終了していたら、最初から再生しなおす」なので、再生終了の場合は再生位置の移動は不要。
また、先頭から再生する処理において
また、GoogleChrome7 では currentTime = 0 直後に play() すると、pause()した位置前後の音が混ざることがある。(少なくとも自分の環境では)
なお、ループ再生する場合は
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 を参照して下さい。
なお、本エントリでは 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でエラーになるそうなので注意。audio = new Audio(""); // 引数に空文字列を指定
// 再生するファイルのアドレス(URL)を指定してオブジェクト作成
audio = new Audio("./sound/temp.mp3");
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" のいずれかを返す。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;
}
""はそのタイプを再生できないことを示す。
上記ソースコードでは「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 ファイルの指定
以下の２つの指定方法がある
・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属性で終了判定している理由は以下のとおり。/* 初期処理 */
// 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秒にする
}
};
再生中に currentTime = 0 を実行すると、play() しなくても最初からの再生処理が実行される。
pause() 後に currentTime = 0 実行すると再生処理は行われないはずだが、Firefox3.6では再生終了後のpause()は無視されて、最初からの再生処理が実行されてしまうため、終了判定をしている。
play()の仕様は「再生が終了していたら、最初から再生しなおす」なので、再生終了の場合は再生位置の移動は不要。
また、先頭から再生する処理において
audio.currentTime = 0;
audio.play();
としても良さそうだが、Firefox3.6では一度も play() していない状態で currentTime = 0 を実行するとエラーになる。audio.play();
また、GoogleChrome7 では currentTime = 0 直後に play() すると、pause()した位置前後の音が混ざることがある。(少なくとも自分の環境では)
なお、ループ再生する場合は
audio.loop = true;
audio.play();
とすればよいのだが、Firefox 3.6 では loop 属性は未実装。詳細はこちらを参照。audio.play();
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 を参照して下さい。
