audioタグを使って音声を再生する

| 2012年1月29日 | HTML5 | 2 Comments
Bookmark this on Hatena Bookmark

HTML5ではaudioタグを使うことでブラウザ上で音声を再生することができます。

動画と同様、HTML4以前は音声もFlashなどのプラグインを使わないと
ブラウザ上で再生することができませんでしたが、
HTML5ではaudioタグを使えば、ブラウザ上でネイティブに音声を再生することができます。

詳しい解説は続きからご覧ください。

audioタグの基本

audioタグの使い方はvideoタグとよく似ています。
src属性を使って音声ファイルを指定します。

1
<audio src="sample.mp3" controls></audio>

audioタグではcontrols属性が必須です。
controls属性を付けなければブラウザ上では何も表示されないため、
音声の停止などのコントロールが全くできなくなってしまいます。

このほか、audioタグで使用可能な属性は以下の通りになっています。

audioタグの属性

属性名説明
src音声ファイルを指定
autoplay自動再生を指定
preload自動読込を指定
loopループ再生を指定
controls再生・停止などの制御を行うコントローラを表示する

上記のpreload属性は音声ファイルの事前読み込みの有無を指定する為の属性です。
ユーザが再生を開始する前にあらかじめ音声ファイルを読み込んでおくことでスムーズに再生を始めることができます。
preload属性に指定可能な値は以下のようなものがあります。

  • none : 音声ファイルを事前に読み込まない
  • metadata : 動画のサイズ（幅や高さ）、1フレーム目の画像、再生時間など、動画のメタデータのみ取得する
  • auto : 音声ファイルを事前に読み込む

省略時、代表的なブラウザではautoが選択されます。

音声フォーマットのブラウザ対応

また、これもvideoタグと同様にsourceタグを使って再生可能な音声ファイルを設定することができます。
この中からブラウザが対応している音声ファイルが再生されます。
（ブラウザが複数の音声ファイルに対応している場合は、記述した順に対応可能なものが再生されます）

1
2
3
4
<audio controls>
<source src="sample.mp3">
<source src="sample.ogg">
</audio>

JavaScriptを使って音声コンテンツを操作する

audioタグもvideoタグと同じようにJavaScriptから操作することができます。
埋め込んだ音声コンテンツを独自のボタンから再生・停止するには以下のようにします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>playaudio2</title>
 
</head>
 
<body>
 
<audio id="audio" controls>
<source src="sample.mp3">
</audio><br>
 
<input type="button" value="play" onclick="audio_play()">
<input type="button" value="pause" onclick="audio_pause()">
 
<script type="text/javascript">
function audio_play() {
   audio.play();
}
 
function audio_pause() {
   audio.pause();
}
</script>
 
</body>
 
</html>

11行目でaudioタグを使って再生する音声ファイルを設定しています。
このとき、JavaScriptから音声ファイルをコントロールできるようにid属性で識別子を設定しておきます。

18行目からJavaScriptの実際のコードになります。
19行目のaudio_playメソッドを定義し、audioオブジェクトに対してplayメソッドを呼ぶことで
音声ファイルを再生します。
23行目で定義したaudio_pauseメソッドではaudioオブジェクトに対してstopメソッドを呼ぶことで
音声ファイルの再生を停止することができます。

あとは、15行目と16行目で用意した2つのボタンにonclick属性で、audio_playメソッドと
audio_stopメソッドを呼ぶようにすればOKです。

以上がaudioタグの基本的な使い方になります。

About The Author

kseto

2 Comments