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イベントを持たすことができた。
ミス誤字やらもっとこうしたら効率が良いなどあると思うけど、とりあえずのメモになります。
この記事が気に入ったらサポートをしてみませんか?