スマホで使う<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だと特に問題ないのですがスマホだと色々な挙動をします。
そもそも大前提としてスマホで使った場合はどうなるのか?
iPhone、Androidでは一回は画面にタップしないと、読み込みと、再生が出来ないように制限されている。
しかし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>