【HTML5】audio要素について

ひさしぶりの更新になってしまいました。

個人的にHTML5から新たに追加されたaudio要素を使う機会があったのでまとめたいと思います。

audio要素は音声を再生するためのタグです。しかしブラウザによって再生可能なファイル形式が異なり、ひとつのファイル形式だけをsrc属性に書いても対応しきれないのが現状です。ただし、音声の場合は私が個人的に調べて検証した結果では、mp3形式とogg形式があればモダンブラウザはだいたいカバーできることがわかりました。なのでこのふたつの形式を用意し、source要素に書いて再生する方法を紹介します。

音声はスマホで取ることが多いと思いますので、ファイル形式を変換する必要がでてきます。そんなときは無料のソフトを使います。おすすめはSwitchという無料の音声変換ソフトです。変換できる種類が多く、操作も簡単で無料期間もそれなりに長いので使ってみて個人的にはこれが一番よかったです。

ダウンロードして、変換したいファイルをドラッグ＆ドロップ、変換したい形式をmp3にして変換を押します。ogg形式も同様にして、ファイルをふたつ用意しましょう。

次にソースコードです。

controlsはインターフェースを表示します。
sourceをふたつ用意し、ファイルへのパスを書きます。
audioの中に対応していない場合のコメントなどを書きます。

検証の環境はWindows10とAndroidのChrome、iPhoneのSafariとChromeです。すべての端末で音声を再生することができました。