要素のサイズを0にする
iOS Safariではdisplay: noneにしてもaudio要素が200x16の基本サイズを持ち、レイアウトに影響を与えます。
CSSでサイズを0にしておきましょう。
audio { width: 0px; height: 0px; }
先頭から再生を始めるには例外処理を入れておく
currentTimeプロパティに0を代入すると、先頭から再生されますが、音楽メタデータをロードする前にこれをすると、例外が発生します。なのでこの処理を入れておきましょう。
bgm = element: $('#bgm')[0] state: 'stop' play: -> bgm.element.play() bgm.state = 'play' pause: -> bgm.element.pause() bgm.state = 'pause' stop: -> bgm.element.pause() bgm.state = 'stop' try bgm.element.currentTime = 0 # iOS Safariでは再生前のavのcurrentTimeに代入しようとすると例外が発生する。 catch e console.log e
onpagehide, onphageshow処理を入れる
[2014-09-25 追記]
iOS8 Safariではload/unloadがdepricatedになって、pageshow/pagehideという名前になりました。これに伴い、下記で使っていた従来のpageshow/pagehideは廃止。
iOS Safariでaudio要素を使ってBGMを鳴らすと、アプリがバックグラウンドになっても鳴り続けます。
音楽サービスでそういう使い方もあるとは思いますが、ゲームなどのBGMの場合、止まってくれた方がいいですね。
(function() { pause = false window.onpagehide = function() { document.getElementById('bgm').pause(); pause = true; }; window.onpageshow = function() { if (pause) { document.getElementById('bgm').play(); pause = false; } }; })();