明日も楽をするために

めんどくさがりなITエンジニアが書くメモ帳

スマホで使う<audio>タグの動作検証

html5からaudioタグが追加されましたが、スマホだとどういった風に動作するのか検証してみました。

<script>
var audio = new Audio();
audio.src = "http://foo.mp3";

function play() {
    audio.load();
    audio.play();
}
</script>
<a href="javascript:void(0)" onClick="play()">play</a>

これが一番簡潔なコードで、PCだと特に問題ないのですがスマホだと色々な挙動をします。

そもそも大前提としてスマホで使った場合はどうなるのか?
iPhoneAndroidでは一回は画面にタップしないと、読み込みと、再生が出来ないように制限されている。

しかしiOS8.4のiPhone6で検証した所、タップをしないでも読み込みができることに気づきました(バグ?

<script>
var audio = new Audio();
audio.src = "http://foo.mp3";
audio.load();//iOS8.4だと動作する
function play() {
    audio.play();
}
</script>
<a href="javascript:void(0)" onClick="play()">play</a>

ちなみに読み込みのload()関数は書かなくても動作します。srcにソースを指定したタイミングと、play()を呼び出した際にも自動的に読み込みが始まります。

それとAQUOS PHONE SERIE(shl23)だとplay()の前にload()を書くと何故か再生されないバグがあります。

<script>
var audio = new Audio();
audio.src = "http://foo.mp3";

function play() {
    audio.load();//shl23だと再生されなくなる・・・・
    audio.play();
}
</script>
<a href="javascript:void(0)" onClick="play()">play</a>

audioタグにはイベントリスナを設定できるのですが、iOS8.4だと画面をもどった際にイベントリスナが効かなくなります(バグ?

<script>
var audio = new Audio();
audio.addEventListener("ended", function(){}, false);//画面を戻った際に反応しない
audio.src = "http://foo.mp3";
audio.load();

function play() {
    audio.play();
}
</script>
<a href="javascript:void(0)" onClick="play()">play</a>

対処方法としては再度audioインスタンスを生成するしかありません。

<script>
function play() {
    var audio = new Audio();
    audio.addEventListener("ended", function(){}, false);
    audio.src = "http://foo.mp3";
    audio.load();
    audio.play();
}
</script>