audioではmp3やwavなどのオーディオファイルをHTML中で扱うことができます。
またオーディオファイルの巻き戻しや一時停止などのコントールのメソッドも提供されています。
Audioタグの利用方法
Audioを実際に利用するには以下の手順でプログラミング及びマークアップを行います。
- ① オーディオオブジェクトを生成する。
- ② オーディオオブジェクトのメソッドをコールすることにより、オーディオファイルをコントールする。
- ③ addEventListener()でイベントを取得すること可能。
Audioタグでオーディオファイルを再生する
それでは、実際にAudioタグを使用してオーディオファイルを再生できるコードを見てみましょう！
※mp3ファイルの用意、CSSファイルなどはご自身でご用意願います。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Audioタグのサンプル</title>
<script type="text/javascript">
window.onload = function(){
audio = new Audio('mp3/chikarakobu.mp3');
}
</script>
</head>
<body>
<p><input type="button" value="再生" onClick="audio.play();"></p>
<p><input type="button" value="停止" onClick="audio.pause();"></p>
</body>
</html>実行結果
8行目でオーディオオブジェクトを生成します。引数には再生するオーディオファイル名を指定します。
13行目のボタンをクリックすると、オーディオファイルが再生がされます。
14行目のpause()メソッドによりボタンがクリックされるとオーディオファイルの再生が停止となります。
このようにHTML5では、非常に簡単にオーディオファイルを扱うことができます。