オーディオについて
■オーディオについて
<AUDIO> タグを使用すると、サウンドファイルを読み込んで再生することができます。
<AUDIO> タグは、HTML5 で追加された要素です。
Safari の場合、QuickTime のインストールが必要です。
AUDIO タグを使用してサウンドを再生する
<html>
<body>
<audio controls preload="auto">
<source src="https://hakuhin.jp/download/js/audio/sample_00.m4a" type="audio/mp4">
<source src="https://hakuhin.jp/download/js/audio/sample_00.mp3" type="audio/mpeg">
<source src="https://hakuhin.jp/download/js/audio/sample_00.ogg" type="audio/ogg">
<source src="https://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 |
■ブラウザがオーディオをサポートしているか調べる
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="https://hakuhin.jp/download/js/audio/sample_00.m4a" type="audio/mp4">
<source src="https://hakuhin.jp/download/js/audio/sample_00.mp3" type="audio/mpeg">
<source src="https://hakuhin.jp/download/js/audio/sample_00.ogg" type="audio/ogg">
<source src="https://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 = "https://hakuhin.jp/download/js/audio/sample_00.wav";
load() メソッドを呼び出すと、明示的にサウンドファイルの読み込みを開始します。
明示的にロードを開始する
// AudioElement を作成
var audio = new Audio();
// プリロードを設定する
audio.preload = "none";
// サウンドファイルまでの URL アドレスを指定
audio.src = "https://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:"https://hakuhin.jp/download/js/audio/sample_00.m4a" , type:"audio/mp4"},
{url:"https://hakuhin.jp/download/js/audio/sample_00.mp3" , type:"audio/mpeg"},
{url:"https://hakuhin.jp/download/js/audio/sample_00.ogg" , type:"audio/ogg"},
{url:"https://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 = "https://hakuhin.jp/download/js/audio/sample_00.wav";
// 再生を開始する
audio.play();
■サウンドを一時停止する
再生中のサウンドを一時停止するには、pause() メソッドを使用します。
サウンドの再生を開始する
// AudioElement を作成
var audio = new Audio();
// サウンドファイルまでの URL アドレスを指定
audio.src = "https://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 = "https://hakuhin.jp/download/js/audio/sample_00.wav";
// 再生を開始する
audio.play();
// 再生を停止する
audio.pause();
audio.currentTime = 0;
サウンドを制御する
■サウンドの再生位置を制御する
サウンドの再生位置を制御するには、currentTime プロパティを使用します。
単位は秒（小数あり）です。
サウンドの再生位置を取得する
// AudioElement を作成
var audio = new Audio();
// サウンドファイルまでの URL アドレスを指定
audio.src = "https://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 = "https://hakuhin.jp/download/js/audio/sample_00.wav";
■読み込み時に自動再生する
サウンドの読み込み時に、サウンドを自動再生するには、autoplay プロパティに true をセットします。
サウンドの読み込み時に、自動的に再生する
// AudioElement を作成
var audio = new Audio();
// 自動再生を有効
audio.autoplay = true;
// サウンドファイルまでの URL アドレスを指定
audio.src = "https://hakuhin.jp/download/js/audio/sample_00.wav";
■ループ再生する
サウンドをループ再生するには、loop プロパティに true をセットします。
サウンドをループ再生する
// AudioElement を作成
var audio = new Audio();
// サウンドファイルまでの URL アドレスを指定
audio.src = "https://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 = "https://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 = "https://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 = "https://hakuhin.jp/download/js/audio/sample_00.wav";
// 再生を開始する
audio.play();
// ミュートを有効
audio.muted = true;