読み書きプログラミング

日常のプログラミングで気づいたことを綴っています

Mobile Safariで自動ロックを抑制する

ナビゲーションアプリ、パズルのようなゲームをウェブアプリで作ると、iPhoneの自動ロックを抑制したくなります。ネイティブアプリならidleTimerDisabledプロパティを使うところです。
解はあって、それは10秒以下の短いaudioを鳴らし続けることです。
Mobile Safariの場合、音はユーザーイベントで再生/ロードを開始する必要があるので、アプリの中で最初にユーザーイベントを受ける場面を設けて、そこで音をループ再生します。

<button id="start" type="button">Start!</button>
<audio id="silent" src="silent.mp3" loop></audio>
$('#start').on 'click', ->
    $('#silent')[0].play()

長いaudioだと、自動ロックします。おそらく、バックライトが消えてから自動ロックするまでに再再生する必要がありそうです。

上記の解は理想には遠く、
1. loopの度に通信してバッテリを消費している。(Safariではオーディオはキャッシュできず、また、data URIは再生できない)
2. 長いBGMを入れたい時には(Mobile Safariでは1つのaudioしか再生できないので)この方法は使えない。
3. 音楽再生中にサイトをアクセスすると音楽が止まってしまう。

もっといい方法ご存知の方、是非教えてください。