HTML Audioの使い方のまとめ

掘り出し物のメモを記事化して公開していく試み。

今回はいわゆるaudioタグです。
いまブラウザで音を出すならどうするのって時の候補ですね。

いまさらです。

Can I use Audio?

Can I use... Support tables for HTML5, CSS3, etc

最近は割と緑色になってきましたね。
モバイルでも、Android4以上から使えるという。

とりあえず使う

いちばんカンタンなコードだと。

<audio src="path/to/audio.file" autoplay loop></audio>

これを書くだけで、ページ読み込み->音声ファイル読み込み->BGMを自動再生->そしてループというお手軽さ。

属性値

attr	value	説明
src	String	音声ファイルへのパス
crossorigin	anonymous, use-credintialsのどちらか	CORSリクエストに認証情報を使用するか、しないか
preload	auto, none, metadataのいずれか	プリロードしておくものの指定
mediagroup	String	グループ名
autoplay	-	自動再生する or NOT
loop	-	ループ再生する or NOT
muted	-	音声をミュートする or NOT
controls	-	再生ボタンやら音量ボリュームやらのUIを表示する or NOT

jsから使う

var audio = new Audio('path/to/audio.file');
audio.loop = true;
audio.play();

appendChildしなくても音は鳴ります。

まあこんな単純な内容なら、特段書くことはないです。

ファイル形式

たとえばmp3は再生できるファイル形式の一部ですが、mp3に対応していない環境もあるかも。
てな場合にフォールバックできるよう複数のファイルを指定することができます。

<audio>
    <source src="bgm.mp3">
    <source src="bgm.ogg">
    <p>対応してません</p>
</audio>

src属性で指定するのではなく、sourceタグを。

var audio = new Audio();
audio.canPlayType('audio/mpeg'); // "probably"
audio.canPlayType('audio/mp4');  // "maybe"
audio.canPlayType('audio/ogg');  // "maybe"
audio.canPlayType('audio/wav');  // "maybe"

ってすれば使えるものを判定もできる。

実際に使うなら

HTML5 の audio 要素と video 要素でサポートされているメディアフォーマット - HTML | MDN

PCならまあogg/mp4/wavと全部用意しておけば良いかな。
モバイル相手ならmp4ですよね。
mp3は商用で使うにはライセンスを料が発生するので、注意したいところ。

拡張子とmime-typeの組み合わせ、端末によっては書き方違うと動かんかったりする・・？

その他の知っとく情報

主にモバイル

だいたいの端末で自動再生はできないと思ったほうがいい
同時再生できるのは1audioまでで、重ねてplayすると先のが止まる
なので重ねたいならvideoタグも使うか、BGM止めてSE流して即BGM再生みたいにする
使えるなら素直にWebAudioAPIを

その他

PCならお手軽に使えるので便利
mutedでautoplayしておいて、ユーザー確認からのmuted解除とか
連続再生するなら、再生後にインスタンスを初期化しなおしておくが吉
再生秒数が欲しいならtimeupdateイベントを