掘り出し物のメモを記事化して公開していく試み。
今回はいわゆるaudioタグです。
いまブラウザで音を出すならどうするのって時の候補ですね。
いまさらです。
Can I use Audio?
最近は割と緑色になってきましたね。
モバイルでも、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"
ってすれば使えるものを判定もできる。
その他の知っとく情報
主にモバイル
- だいたいの端末で自動再生はできないと思ったほうがいい
- 同時再生できるのは1audioまでで、重ねてplayすると先のが止まる
- なので重ねたいならvideoタグも使うか、BGM止めてSE流して即BGM再生みたいにする
- 使えるなら素直にWebAudioAPIを
その他
- PCならお手軽に使えるので便利
- mutedでautoplayしておいて、ユーザー確認からのmuted解除とか
- 連続再生するなら、再生後にインスタンスを初期化しなおしておくが吉
- 再生秒数が欲しいならtimeupdateイベントを