JavaScriptでの操作が基本
PCと違い、スマホでは、Audioの機能に制限があるので、JavaScriptで操作することが基本となります。
音源ファイルはMP3だけで問題なし
スマホだけでなく、PCのブラウザでも、MP3さえあれば、ほとんど再生されます。
同時再生について
少し前の機種では、同時に音が再生されませんでした。
iOS6、Android4.1から同時再生が可能になりました。
自動再生について
ユーザーが操作するイベントでしか、音を読み込むことができない。
例えば、サイトにアクセスしたと同時に再生することはできません。
ユーザーの意思による操作が必要だからです。
プリロードすることもできません。
var audio = new Audio('sound.mp3'); var btn = document.getElementById('btn'); btn.addEventListener('click', function() { audio.play(); }, false);
ループは自分で
スマホではloop属性が効かないので、自分で実装します。
audio.addEventListener('ended', function() { this.currentTime = 0; this.play(); });
再生中の再生について
私の環境では、はっきり現象が確認できていないですが、Androidでは、再生中に最初から再生させるとき(ボタンのタップ音などで使う想定)、再度new Audio()しないと駄目なものがあるようです。
音量は本体で変更する
音量の操作は、スマホ本体で行うようになっており、JavaScriptなどで変えることができません。
非表示中の再生について
最近のバージョンでは、再生中にブラウザを非表示にしても、再生し続けてしまいます。
BGMのように、ずっと再生している場合、非表示のときに止まるようにしてあげましょう。
document.addEventListener('visibilitychange', function(){ if (document.visibilityState === 'hidden'){ audio.pause(); }else if(document.visibilityState === 'visible'){ audio.play(); } }, false);
※クロスブラウザ対応の場合、visibilitychangeの機能が使えるかどうか、判定して実装してください。
コメント