🧊

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イベントを