オーディオエレメントを作成する
■HTMLAudioElement について
サウンドファイルを再生するには、 AUDIO タグを使用します。
safari で動作しない場合、QuickTime のインストールが必要となるようです。(windows7 safari5 で確認)
AUDIO タグを使用してサウンドを再生する
<html>
<body>
<audio controls preload="auto">
<source src="http://hakuhin.jp/download/js/audio/sample_00.m4a" type="audio/mp4">
<source src="http://hakuhin.jp/download/js/audio/sample_00.mp3" type="audio/mpeg">
<source src="http://hakuhin.jp/download/js/audio/sample_00.ogg" type="audio/ogg">
<source src="http://hakuhin.jp/download/js/audio/sample_00.wav" type="audio/wav">
未対応時に表示される文字
</audio>
</body>
</html>
AUDIO タグは、DOM オブジェクト上では HTMLAudioElement となります。
■ブラウザが HTMLAudioElement をサポートしているか調べる
ブラウザが、オーディオをサポートしているか調べるには、window.HTMLAudioElement が真であるか比較します。真であれば対応しています。
■HTMLAudioElement オブジェクトを作成する
HTMLAudioElement オブジェクトを動的に作成するには、
「document.createElement()」メソッドか、「Audio クラス」を使用します。
Audio には、以下のような省略可能な引数があります。
new Audio( URL );
| 第01引数(略可) | サウンドファイルまでの URL アドレス |
| 戻り値 | HTMLAudioElement オブジェクト |
作成例です。
createElement メソッドを使用して HTMLAudioElement を作成
var audio = document.createElement("audio");
Audio クラスを使用して HTMLAudioElement を作成
var audio = new Audio();
■コントロールを表示する
まず、controls プロパティを true に変更します。
次に HTMLAudioElement オブジェクトを DOM ノードに登録すると、コントロールがブラウザ上で表示されるようになります。
オーディオコントロールを表示する
// AudioElement を作成
var audio = new Audio();
// コントロールを有効
audio.controls = true;
// body の最後尾に登録する
document.body.appendChild(audio);
サウンドファイルを読み込む
■プリロードを設定する
プリロードを設定するには、preload プロパティを使用します。
以下のプリロード設定があります。デフォルトでは "auto" となります。
autoplay 属性が有効の場合、設定は無視され "auto" となります。
| 文字列 | 解説 |
| "auto" | すべてのデータを事前に読み込む |
| "metadata" | メタデータのみを事前に読み込む |
| "none" | 事前に読み込みを行わない |
プリロードを設定する
// AudioElement を作成
var audio = new Audio();
// プリロードを設定する
audio.preload = "metadata";
■サウンドファイルを外部から読み込む
src プロパティに、「サウンドファイルまでの URL アドレス」を文字列で指定します。
src プロパティに値をセットした時点で、プリロードの設定通りの読み込みが開始されます。
サウンドファイルまでの URL アドレスを指定する
// AudioElement を作成
var audio = new Audio();
// サウンドファイルまでの URL アドレスを指定
audio.src = "http://hakuhin.jp/download/js/audio/sample_00.wav";
load() メソッドを呼び出すと、明示的にサウンドファイルの読み込みを開始します。
明示的にロードを開始する
// AudioElement を作成
var audio = new Audio();
// プリロードを設定する
audio.preload = "none";
// サウンドファイルまでの URL アドレスを指定
audio.src = "http://hakuhin.jp/download/js/audio/sample_00.wav";
// 読み込みを開始する
audio.load();
■ブラウザが対応しているサウンドフォーマットを調べる
ブラウザが、指定したサウンドファイルのフォーマットに対応しているか調べるには、canPlayType() メソッドを使用します。
引数にコンテンツタイプを文字列で指定します。
戻り値から "" が得られればフォーマットに対応していません。
コンテンツタイプの一覧です。
| フォーマット | コンテンツタイプ |
| WAVE | audio/wav |
| MP3 | audio/mpeg |
| Ogg Vorbis | audio/ogg |
| AAC | audio/mp4 |
サポートするサウンドファイルの URL を調べる
// AudioElement を作成
var audio = new Audio();
// サーバ側で用意しているサウンドファイルのリスト
var audio_file_list = [
{url:"http://hakuhin.jp/download/js/audio/sample_00.m4a" , type:"audio/mp4"},
{url:"http://hakuhin.jp/download/js/audio/sample_00.mp3" , type:"audio/mpeg"},
{url:"http://hakuhin.jp/download/js/audio/sample_00.ogg" , type:"audio/ogg"},
{url:"http://hakuhin.jp/download/js/audio/sample_00.wav" , type:"audio/wav"}
];
// サポートしているコンテンツタイプを調べて URL を設定する
var i;
var num = audio_file_list.length;
for(i=0;i < num;i++){
if(audio.canPlayType(audio_file_list[i].type) != ""){
audio.src = audio_file_list[i].url;
break;
}
}
■フォーマット対応チェッカー
どのフォーマットに対応しているかチェックできます。
様々なブラウザからアクセスしてみて下さい。
■サーバ側にサウンドファイルのコンテンツタイプを設定する
ブラウザによっては、サーバから正しいコンテンツタイプを得られないとオーディオが動作しません。
.htaccess でコンテンツタイプを追加する例です。
.htaccess にオーディオ関連のコンテンツタイプを追加する
AddType audio/ogg .ogg
AddType audio/mp4 .aac
AddType audio/mp4 .m4a
サウンドを再生する
■サウンドを再生する
サウンドを再生するには、play() メソッドを使用します。
サウンドの再生を開始する
// AudioElement を作成
var audio = new Audio();
// サウンドファイルまでの URL アドレスを指定
audio.src = "http://hakuhin.jp/download/js/audio/sample_00.wav";
// 再生を開始する
audio.play();
■サウンドを一時停止する
再生中のサウンドを一時停止するには、pause() メソッドを使用します。
サウンドの再生を開始する
// AudioElement を作成
var audio = new Audio();
// サウンドファイルまでの URL アドレスを指定
audio.src = "http://hakuhin.jp/download/js/audio/sample_00.wav";
// 再生を開始する
audio.play();
// 再生を一時停止する
audio.pause();
サウンドが、一時停止中であるか調べるには、paused プロパティを使用します。
true であれば一時停止中です。
■サウンドを停止する
再生中のサウンドを停止するには、pause() メソッドを呼び出した後、
currentTime プロパティに 0 にセットします。
サウンドの再生を停止する
// AudioElement を作成
var audio = new Audio();
// サウンドファイルまでの URL アドレスを指定
audio.src = "http://hakuhin.jp/download/js/audio/sample_00.wav";
// 再生を開始する
audio.play();
// 再生を停止する
audio.pause();
audio.currentTime = 0;
■サウンドの再生位置を制御する
サウンドの再生位置を制御するには、currentTime プロパティを使用します。
単位は秒（小数あり）です。
サウンドの再生位置を取得する
// AudioElement を作成
var audio = new Audio();
// サウンドファイルまでの URL アドレスを指定
audio.src = "http://hakuhin.jp/download/js/audio/sample_00.wav";
// 再生を開始する
audio.play();
// 60 fps 間隔で実行する
setInterval(function(){
// 再生位置を取得する
console.log(audio.currentTime);
},1000/60);
■サウンドの総時間を取得する
サウンドの総時間を取得するには、duration プロパティを使用します。
単位は秒（小数あり）です。
サウンドの総時間を取得する
// AudioElement を作成
var audio = new Audio();
// サウンドファイルまでの URL アドレスを指定
audio.src = "http://hakuhin.jp/download/js/audio/sample_00.wav";
// メタデータ読み込み完了時に実行されるイベント
audio.addEventListener("loadedmetadata",function(e){
// 再生総時間を取得する
console.log(audio.duration);
},false);
■読み込み時に自動再生する
サウンドの読み込み時に、サウンドを自動再生するには、autoplay プロパティに true をセットします。
サウンドの読み込み時に、自動的に再生する
// AudioElement を作成
var audio = new Audio();
// 自動再生を有効
audio.autoplay = true;
// サウンドファイルまでの URL アドレスを指定
audio.src = "http://hakuhin.jp/download/js/audio/sample_00.wav";
■ループ再生する
サウンドをループ再生するには、loop プロパティに true をセットします。
サウンドをループ再生する
// AudioElement を作成
var audio = new Audio();
// サウンドファイルまでの URL アドレスを指定
audio.src = "http://hakuhin.jp/download/js/audio/sample_00.wav";
// ループ再生を有効
audio.loop = true;
// 再生を開始する
audio.play();
■再生速度を変更する
サウンドの再生速度を変更するには、playbackRate プロパティを使用します。
単位は倍率です。（デフォルトは 1.0）
サウンドを 1.5 倍速で再生する
// AudioElement を作成
var audio = new Audio();
// サウンドファイルまでの URL アドレスを指定
audio.src = "http://hakuhin.jp/download/js/audio/sample_00.wav";
// 再生速度を変更する
audio.playbackRate = 1.5;
// 再生を開始する
audio.play();
■サウンドのボリュームを制御する
サウンドの音量を制御するには、volume プロパティを使用します。
単位は 0.0（無音）～ 1.0（最大）までの間の小数値です。
サウンドのボリュームを変更する
// AudioElement を作成
var audio = new Audio();
// サウンドファイルまでの URL アドレスを指定
audio.src = "http://hakuhin.jp/download/js/audio/sample_00.wav";
// 再生を開始する
audio.play();
// 音量を 0.5 に設定する
audio.volume = 0.5;
■サウンドのミュートを制御する
サウンドのミュートを制御するには、muted プロパティを使用します。
true をセットするとミュート（無音）が有効になります。
false をセットすると volume プロパティで設定した通りの音量となります。
サウンドを無音状態にする
// AudioElement を作成
var audio = new Audio();
// サウンドファイルまでの URL アドレスを指定
audio.src = "http://hakuhin.jp/download/js/audio/sample_00.wav";
// 再生を開始する
audio.play();
// ミュートを有効
audio.muted = true;
問答収集
