JavaScript プログラミング講座

 

オーディオについて

 


■オーディオについて


<AUDIO> タグを使用すると、サウンドファイルを読み込んで再生することができます。
 
<AUDIO> タグは、HTML5 で追加された要素です。
 
Safari の場合、QuickTime のインストールが必要です。
 
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>
 
サンプル表示


 

■ HTMLMediaElement インターフェースについて

 
HTMLMediaElement インターフェースは、メディアを制御するための機能がまとまっています。
 

■ HTMLAudioElement インターフェースについて

 
HTMLAudioElement インターフェースは、サウンドファイルを再生するための機能がまとまっています。
 
HTMLAudioElement インターフェースは、<AUDIO> タグに相当します。
 
エレメントの一種です。
 
このページでは、HTMLMediaElement と HTMLAudioElement インターフェースで供給される機能について解説しています。
 
■ HTMLAudioElement インターフェースの派生について

HTMLAudioElement インターフェースは、以下の様に派生しています。
 
ここで解説してない分は、リンク先に解説がありますので合わせてご覧下さい。
 
Object
↓派生
EventTarget
↓派生
Node
↓派生
Element
↓派生
HTMLElement
↓派生
HTMLMediaElement
↓派生
HTMLAudioElement
 

■ブラウザが HTMLAudioElement をサポートしているか調べる

 
ブラウザが、オーディオをサポートしているか調べるには、window.HTMLAudioElement が真であるか比較します。
 
 


 

オーディオを作成する

 


■HTMLAudioElement オブジェクトを作成する

 
■createElement() メソッドを使用する
 
HTMLAudioElement オブジェクトを作成するには、document.createElement() メソッドを使用します。
 
引数に、"audio" を指定します。
 
動的に HTMLAudioElement オブジェクトを作成する

// HTMLAudioElement オブジェクトを作成する
var audio = document.createElement("audio");

// 出力テスト
console.log(audio);
 
■ Audio コンストラクタを使用する
 
new 演算子を使って、Audio コンストラクタをインスタンス化する事もできます。
 
new Audio( "URL" ) :HTMLAudioElement
第01引数(略可)Stringサウンドファイルの URL を指定
戻り値 HTMLAudioElement新しく作成された HTMLAudioElement オブジェクト
 
Audio コンストラクタを使って、動的に HTMLAudioElement オブジェクトを作成する

// HTMLAudioElement オブジェクトを作成する
var audio = new Audio();

// 出力テスト
console.log(audio);
 

■オーディオプレイヤーをブラウザに表示する


オーディオプレイヤーの可視表示を設定するには、controls プロパティを使用します。
 
デフォルトは、false です。
 
HTMLAudioElement オブジェクトを、ブラウザに表示するには、任意のノードリストに登録する必要があります。
 
音を出力したいだけの場合は、ノードリストに登録する必要はありません。
 
オーディオを動的に作成して、ブラウザに表示する

// HTMLAudioElement オブジェクトを作成する
var audio = new Audio();

// コントロールの表示を有効
audio.controls = true;

// BODY のノードリストに登録する
document.body.appendChild(audio);
 

■静的な <AUDIO> タグから、HTMLAudioElement オブジェクトを取得する


静的に用意した <AUDIO> タグから、エレメントを取得する方法は、こちらで解説しています。
 
静的な <AUDIO> タグから、HTMLAudioElement オブジェクトを取得する

<html>
  <body>

    <audio id="aaa" 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>

    <script type="text/javascript">
    <!--
	// "aaa" という ID 属性のエレメントを取得する
	var audio = document.getElementById("aaa");

	// 出力テスト
	console.log(audio);

    //-->
    </script>

  </body>
</html>
 


 

サウンドファイルを読み込む

 
 


■プリロードを設定する


プリロードを設定するには、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();

// メタデータ読み込み完了時に実行されるイベント
audio.addEventListener("loadedmetadata",function (e){

	// 再生総時間を取得する
	console.log(audio.duration);

});

// サウンドファイルまでの URL アドレスを指定
audio.src = "http://hakuhin.jp/download/js/audio/sample_00.wav";
 

■読み込み時に自動再生する


サウンドの読み込み時に、サウンドを自動再生するには、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;