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ファイルを再生できるため、今回は使っておりません。

Audioを活用したサンプルアプリ

音を鳴らすアプリ