HTML5 audioタグの扱い

スマホ再生させる際ハマったのでメモ。

基本的には、Audioオブジェクトに対して play() すると再生される。
以下Javascript。

const audio = new Audio("/test/hoge.mp3");
audio.play();

ただスマホだとなんらかのアクションであらかじめロードさせなければplay()が効かなかった。
clickイベントなどで
音声を再生しますか？　はい or いいえ
みたいな画面を用意しておいて、はいをclickしたタイミングでロードするといい。

audio.load();

各ボタンごとに別々の音声を再生させる方法。
mp3URLを配列で持っている前提ならば、
forで回してnewの際にわたしてあげる。例えば、

const sound =["hoge1.mp3","hoge2.mp3","hoge3.mp3"]
const audio = new Audio(sound[i]);
audio[i].load();

あとは、ボタンに対してforでIDをそれぞれに降ってあげて、それに対してclickイベントをつけたらいい。

ちなみにボタンをappendなどでJSで生成していたら、

親要素.on("click touchstart tap","#btnBgm"+i,function(){
    audio[i].play();
});

このようにすれば追加されたDOMに対してもclickイベントを持たすことができた。

ミス誤字やらもっとこうしたら効率が良いなどあると思うけど、とりあえずのメモになります。