|
HTML5＋CSS3 |
HTML5編
|
| Lesson 8 | 新機能の使用方法(1) audio要素 |
|||
| 制作・文 | 菅沼辰弥（株式会社ロクナナ） |
| HTML5から新たにaudio要素が追加された。HTML4.01まではembed要素を用いて外部のプレイヤーに再生させる 必要があったが、ブラウザのみで音声ファイルを再生し、JavaScriptでコントロールできるようになった。 |
audio要素の
基本的な使い方
audio要素の基本的な使い方は、画像を表示するimg要素によく似ているので、理解するのはさほど難しくないはずだ。src属性に音声ファイルのパスを指定し、controlsやautoplayのような再生を制御するための属性を付け加えればよい【1】。
controls 属性はブラウザに用意されているコントローラを表示させる意味をもつ。これがないと何も表示されず、（コントローラを自前で用意しない限り）操作ができないので注意が必要だ。値は必要ないのでスペースで挟んで「controls」と書くだけでよい。そのほかにも専用の属性が用意されているのであわせて覚えておこう【2】。
Web上で音声ファイルを扱う際にはコーデックに注意しなければならない。ブラウザごとに対応している形式が違うため、src属性にひとつのファイルを指定するだけではすべての環境で再生させることはできない。これを解決するためには、source要素を利用し、複数の音声ファイルを指定してやる必要がある【3】【4】。
複数のファイルを指定する場合は、audioではsrc属性を指定しない。代わりに複数のsource要素を書いていき、それぞれsrc属性を指定する。
このように異なる音声ファイルをいくつか指定しておくと、ブラウザは上から順に読んでいき、対応している最初のファイルをaudioのsrcとして読み込む。source要素の必須属性はsrcのみだが、type属性にMIMEタイプ、codecsにコーデックを指定することができる。
【1】
【2】
【3】
【4】Chromeにおける表示例
【4】FireFoxにおける表示例
【4】Internet Explorerにおける表示例
【4】Operaにおける表示例
【4】Safariにおける表示例
JavaScriptで
制御
audio要素にはJavaScript から操作するためのメソッドが用意されている。これを使えばコントローラを独自に実装したり、もっと複雑な操作を行うことが可能となる。今回は【5】にあるHTMLを使う。
audioタグにはcontrols 属性をつけていないのでコントローラは表示されない。代わりに、input要素のボタンを使って独自のコントローラを作り、JavaScriptで操作ができるようにする【6】。
ボタンのonclick イベントでそれぞれ関数を実行させるように記述した【7】。再生と一時停止は単純なもので、それぞれaudio ノードに対してplay() やpause()を実行するだけで制御することができる。再生速度はplaybackRateプロパティに数値を代入すると変化する。通常の速度は1なので2にすれば2 倍、0.5にすれば半分という具合だ。
停止に関しては、専用のメソッドは用意されていないが、pause() とcurrentTimeプロパティを併用することで実現可能だ。currentTimeは現在の再生位置を格納してあるプロパティなので、ここに0を代入すると先頭に戻ることができる。同時にpause()を実行するとあたかも停止ボタンが押されたような挙動になる。
【5】
【6】
【7】
audio要素を書かずに
再生するアウトラインの確認方法
実は、audio要素をHTML に書かずにJavaScriptだけで音声を再生することも可能だ【8】。new Audio()でAudio()オブジェクトを生成し、myAudio に格納する。この時にAudio()の引数として音声ファイルのパスを渡すことができるが、対応しているコーデックがブラウザごとに違う 現状では、対応状況を調べて分岐してからパスを渡す必要がある。myAudio.canPlayType() メソッドにMIME タイプを渡すと、""（空文字列）、"maybe"、"probably" のいずれかを返す。そのMIMEタイプが再生できない場合は空文字列が返ってくるので、それを使ってif文で分岐をして、myAudio.srcにファイルパスを代入すれば準備は完了だ。
【8】
制作協力:akio.Hayakawa「Indira」
※ 商用／非商用を問わず、権利者の許可なく配布等の本書の定めた使用範囲を超え た行為を禁じます。
＞＞目次に戻る
