Mobile SafariでBGM鳴らすときの注意事項３点

要素のサイズを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;
    }
  };
})();