Audioは音声や音楽ファイルを扱うための要素です。
記述方法
<audio src="cacha.mp3" id="cacha" controls></audio>
動作例
属性にcontrolsを記述することで再生ボタンや一時停止ボタンなどのコントローラーが用意されます。
属性値は省略可能です、もし省略しない場合はcontrols=”controls”と記述できますが、基本的には省略です。
ちなみに、今回素材として扱っている音はアシアル情報教育研究所の所長が「メカニカルキーボード」で打鍵している音です。打鍵音が大きいため、会社で使用禁止にされ、自宅でも使用禁止にされてしまいました。この記事を書くために引っ張り出して久しぶりにたたきました。
活用方法
音楽を聴かせる
音楽作品を紹介するようなウェブページや、自分専用の音楽再生アプリを作ることに使えるかもしれません。
また、loopという属性もあるので、BGMを掛けることにも使えると思います。
loopの記述方法
<audio src="cacha.mp3" id="cacha" loop controls></audio>
loopも属性値は省略可能です。
効果音を鳴らす
実はAudioタグの再生ボタンを使わなくてもJavaScriptで再生を行えます。そのため、「ボタンがクリックされたら連動して音を鳴らす」とか「ゲームをクリアーしたら効果音を鳴らす」と言ったことが可能です。先ほどのAudioタグをJavaScriptで再生する場合の例を以下に記述します。
cacha = document.getElementById("cacha");
cacha.play();
DOMを取得してplay()命令を実行するだけです。
音声案内
このページの記事を「合成音声」で読み上げたファイルを作成してみました。
補足
sourceタグと組み合わせると、一つのAudioに対して複数の音声ファイルソースを用意できます。用途としては、ブラウザ事に対応している音声フォーマットが異なる場合に使えます。なお、今回用意している音声ソースがmp3ファイルで、大半のブラウザはmp3ファイルを再生できるため、今回は使っておりません。